<!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. GZip对字符串压缩和解压

    /// <summary> /// 压缩 /// </summary> /// <param name="value">需要压缩字符串</ ...

  2. Python缩进与if语句 空格的魅力

    缩进 Python最具特色的是用缩进来标明成块的代码.我下面以if选择结构来举例.if后面跟随条件,如果条件成立,则执行归属于if的一个代码块. 先看C语言的表达方式(注意,这是C,不是Python! ...

  3. hdu-5707-Combine String

    题意:给你三个字符串,让你计算1 2 串和3 串是否匹配,就是3串可以分解为 1  2 串,字母顺序必须是按照1 2 串的字母前后顺序. DP代码太深奥 看不太透,这个代码比较好理解一点: #incl ...

  4. 虚拟机安装---vm12+ubuntukylin16.04

    虚拟机安装及部分问题解决方案: https://blog.csdn.net/qq_35208390/article/details/78271743 安装vmware tools后,需设置共享文件夹才 ...

  5. 学习笔记50—多重假设检验与Bonferroni校正、FDR校正

    总结起来就三句话: (1)当同一个数据集有n次(n>=2)假设检验时,要做多重假设检验校正 (2)对于Bonferroni校正,是将p-value的cutoff除以n做校正,这样差异基因筛选的p ...

  6. yum update软件包冲突

    因升级系统过程中断,重新进入系统继续升级出现如下问题(内容太多,只粘部分内容) # yum update 正在解决依赖关系 --> 正在检查事务 ---> 软件包 alsa-firmwar ...

  7. MySQL学习(八)

    连接查询 1 集合的特点:无序性,唯一性 集合的运算:求并集,求交集,求笛卡尔积 表和集合的关系 一张表就是一个集合,每一行就是一个元素 疑问:集合不能重复,但我有可能两行数据完全一样 答:mysql ...

  8. 图片路径转base64字节码

    package product; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOE ...

  9. learn python the hard way 习题6～10总结

    习题6总结 定义字符串: 名字 = 值 其他 你也可以用 {types_of_people}的方式把它放在任何字符串中. 也就是说你可以在其他字符串中添加{},然后前面加一个 f,可用print()进 ...

  10. English Voice of <<if were a boy >>

    <if i were a boy>中英文歌词: If I were a boy 如果我是个男孩 Even just for a day 就算只是一天 I' roll out of bed ...