<!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. php CLI SAPI 内置Web Server

    PHP 5.4.0起, CLI SAPI 提供了一个内置的Web服务器. 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作目录(Working ...

  2. 关于Java类和包的那些事

    *.Java文件 问题:一个.java源文件中是否可以包括多个类(不是内部类)?有什么限制? 答案:可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致.一个文件中可以 ...

  3. IntelliJ IDEA平台下JNI编程（五）—本地C代码创建Java对象及引用

    本文学习如何在C代码中创建Java对象和对象数组,前面我们学习了C代码中访问Java对象的属性和方法,其实在创建对象时本质上也就是调用构造函数,因此本文知识学习起来也很轻松.有了前面学习数组创建的方法 ...

  4. Windows 操作系统与内核版本号

    Win10查询内部版本(内核版本)的方法:1.按下Win+R组合键启动“运行”窗口,输入“msconfig”并确定2.在“系统配置”窗口中点击“工具”标签,选择“关于Windows”一项后点击“启动” ...

  5. java 数据导入xls

    @RequestMapping("admin/doorDesign/getexcel.do") public void getExcel(String name,String ph ...

  6. Mac 如何安装 chromedriver

    1.使用brew  命令 前提是要安装 brew 这里不做介绍 使用命令 brew install chromedriver 如上图出现错误,根据提示可以使用如下命令安装 brew cask inst ...

  7. mac软件

    1. http://www.ifunmac.com/ 2.Mac安装软件时提示已损坏的解决方法 http://www.jianshu.com/p/3d04a2292fcd 3.mac以后有时间在装的软 ...

  8. Day2-异步IO+Scrapy爬虫

    一.异步IO http://www.cnblogs.com/wupeiqi/articles/6229292.html 这篇文章写的不错,展示了多种高并发的方式,从同步执行→多线程→多进程→async ...

  9. Servlet Exception and Error Handling

    Servlet API support for custom Exception and Error Handler servlets that we can congiure in deployme ...

  10. HeadFIrst Ruby 第七章总结 hashes

    前言 这一章节介绍了 Ruby 中 hash 这一数据类型的用法和特征. Hash 的定义 与 array 的对比 最大的不同: An array can only use integers as i ...