<!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. java GUI 返回图片源码

    返回图片源码,重开一个类粘贴即可 package cn.littlepage.game; import java.awt.Image; import java.awt.image.BufferedIm ...

  2. d3 parse字符串形式的xml svg and append to element

    参考这个方法,但不想修改d3 https://gist.github.com/biovisualize/373c6216b5634327099a 虽然也绕了点弯,但还算很快了,比较满意,也学到了,记下 ...

  3. Integer与int区别

    Integer与int的区别:估计大多数人只会说道两点,一开始我也不太清楚,Ingeter是int的包装类,int的初值为0,Ingeter的初值为null.但是如果面试官再问一下Integer i ...

  4. Python&HDF5目录

    最近一直没更新python&量化的博客,是因为忙于看HDF5的书,写VNPY框架,学scrapy爬虫. 本来写博客的目的就是为了当作一种教材,当遇到不会的问题过来找答案. 对于HDF5下面这本 ...

  5. Nginx的安装和使用(Linux)

    关于什么是Nginx,Nginx的优势和使用范围这里就不多说了.其实它就是一个web服务器.这篇文章主要是说Nginx的安装和使用. 安装方式有yum安装和源码安装,这里主要讲源码安装 1.安装依赖, ...

  6. 《HTTP 权威指南》笔记:第十三章 摘要认证体制

    前言 基本认证存在缺陷,摘要认证为了解决基本认知的一些缺陷,进行了进一步的完善,更加安全. 流程 摘要认证的特点是:永远不会以明文方式在网络上发送密码原理:通过发送一个「指纹」或者「密码的摘要」来验证 ...

  7. javascript获取id元素

    function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法....   function $(id){ return doc ...

  8. English trip V1 - B 18. Workplaces 工作地方 Teacher:Russell Key: do / does

    In this lesson you will learn to talk about workplaces. 课上内容(Lesson) My English Teacher name is Russ ...

  9. Python自学:第二章 删除空白

    lstrip:剔除开头空白 strip:剔除两段空白 rstrip:剔除末尾空白 favorite: 最喜欢的 >>>favorite_language = "Python ...

  10. P4426 [HNOI/AHOI2018]毒瘤

    挺不错的一个题. 题意即为求一个图的独立集方案数. 如果原图是一棵树,可以直接大力f[x][0/1]来dp. 由于非树边很少,考虑2^11容斥,强制某些点必选,然后再O(n)dp,这样应该过不了. 发 ...