<!DOCTYPE html>
<html>
<head>
<meta content="测试demo" name="Keywords">
<meta content="测试demo" name="Description">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>js原生回到顶部</title>
</head>
<body style="width:auto;height:2000px">
<div style="position: fixed;bottom: 50px;right: 10%; text-align:center; line-height:30px; cursor:pointer; background:red;width:80px;height: 30px;-webkit-background-size: 100%;background-size: 100%;z-index: 1001;" id="$backtotop">返回顶部</div>
<script>
!(function () {
var Animate = function (dom) {
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.duration = null;
if (!this.start) {
Animate.prototype.start = function (endPos, duration) {
this.startTime = +new Date;
this.startPos = document.body.scrollTop;
this.endPos = 0;
this.duration = duration;
var self = this;
var timeId =
setInterval(function () {
if (self.step() === false) {
clearInterval(timeId);
}
}, 19);
}; Animate.prototype.step = function () {
var t = +new Date;
if (t >= this.startTime + this.duration) {
this.update(this.endPos); return false;
}
var pos = function (t, b, c, d) {
return c * t / d + b;
};
this.update(pos(t - this.startTime,
this.startPos,
this.endPos - this.startPos,
this.duration));
}; Animate.prototype.update = function (pos) {
document.body.scrollTop = pos;
};
};
};
document.getElementById("$backtotop").onclick = function () {
var animate = new Animate();
animate.start(0, 300);
};
})();
</script>
</body>
</html>

js原生回到顶部的更多相关文章

  1. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

  2. js原生回到顶部，并平滑过渡---- 记录

    window.scrollTo({ top: 0, behavior: 'smooth', });

  3. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  5. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  6. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  7. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  8. js实现回到顶部操作

    <a href="javascript:;" id="btn" title="回到顶部"></a> 样式: #btn ...

  9. 原生js实现回到顶部

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

随机推荐

  1. linux中日历命令显示

    cal 显示当前月的日历 cal 年份 显示特定一年的年历 [jasmine.qian@]$ cal January 2019 Su Mo Tu We Th Fr Sa 1 2 3 4 5 6 7 8 ...

  2. SSL证书申请，如何快速通过SSL文件验证。

    申请SSL证书会让我们进行验证域名,一般方式如下: 1.FTP验证 2.文件验证 3.DNS验证 这三种方式各有各的优缺点,本文解决如何在IIS的环境下通过sslforfree网站的文件验证. 域名: ...

  3. MarkerOpter marker操作类

    构造函数:MarkerOpter=function(p_params): p_params={} 参数描述: p_params.layer; // markerlayer p_params.imgUr ...

  4. Lua和C++交互 学习记录之九：在Lua中以面向对象的方式使用C++注册的类

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 在 ...

  5. 第 4 章 容器 - 028 - 限制容器对CPU的使用

    限制容器对CPU的使用 默认设置下,所有容器可以平等地使用 host CPU 资源并且没有限制. Docker 可以通过 -c 或 --cpu-shares 设置容器使用 CPU 的权重.如果不指定, ...

  6. 免费的剪贴板工具Ditto安装与使用

    下载地址:https://sourceforge.net/projects/ditto-cp 直接安装,选择好安装的位置,一直选择默认的选项就行

  7. （转）UCOSII源代码剖析

    启动工作原理 刚接触操作系统的时候觉得这个最神秘,到底里面做了什么,怎么就成了个操作系统,它到底有什么用,为什么要引进来着个东东.学了之后才知道,原来最根本的思想还是源于汇编里面的跳转和压栈,以调用一 ...

  8. Bayesian generalized linear model (GLM) | 贝叶斯广义线性回归实例

    一些问题: 1. 什么时候我的问题可以用GLM,什么时候我的问题不能用GLM? 2. GLM到底能给我们带来什么好处? 3. 如何评价GLM模型的好坏? 广义线性回归啊,虐了我快几个月了,还是没有彻底 ...

  9. .Net调用QQ邮箱发送邮件

    话说网上发送邮件的代码很多,但是我由于不细心,导致拿别人的代码发送邮件老是失败,今天就说说几个要注意的地方吧!!! public bool SendEmail() { MailMessage msg ...

  10. Python自学:第二章 合并（拼接字符串）

    first_name = "ada" last_name = "lovelace" full_name = first_name + " " ...