javascript 回到顶部 动画效果
上代码：
<!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:100%;height:2000px">
<div style="position: fixed;bottom: 50px;right: 10%;" 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>
javascript 回到顶部 动画效果的更多相关文章
- JS实现回到页面顶部动画效果 2016.03.23
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...
- javascript 回到顶部效果的实现
demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...
- 纯javascript 回到 顶部 实例
很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人, ...
- javascript 通用loading动画效果
由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法: 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); ...
- jquery javascript 回到顶部功能
今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...
- js+css实现点击回到顶部的效果（最低兼容至ie7）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript Timer实现动画效果
<style type="text/css"> div { width: 100px; height: 50px; background: red; margin: 1 ...
- javascript 回到顶部
<script type="text/javascript"> window.onload = function(){ var timer = null; //用于判断 ...
- js回到顶部 动画速度 （自己记录）
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...
随机推荐
- DB 注意事项 优化数据库查询
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- 算法，java代码实现打印万年历
万年历 以1900年1月1号星期一为时间原点 星期日 第一天 星期一 第二天 星期二 第三天 星期三 第四天 星期四 第五天 星期五 第六天 星期六 第七天 1.计算出当前日 ...
- java 静态导入 小结
之前看过静态导入这一块,在编程思想里,但是记不清了,今天搜了下,看到有一个博文写的不错,所以留做备注吧 总结: import static xxx.xxx 和普通导入的区别在于,普通导入是需要通过& ...
- 使用bat将优盘中的dig加到系统环境变量
第一次使用bat批处理,记录下,方便查阅. @echo off::当前盘符set curPath=%cd%set digPath ="%curPath%tool\dig"set P ...
- encodeURIComponent() 函数
https://baike.baidu.com/item/encodeURIComponent() 函数/7418815?fr=aladdin encodeURIComponent() 函数[1] 作 ...
- eclipse 按住ctrl 按钮没有反映
以下是修改为XML Editior打开方法Window -> Preferences -> General -> Editors -> File Associations Fi ...
- Linuxc - C语言下return 0的意义
两条指令同时执行,前提是第一条指令返回0.否则不执行第二条指令. root@jiqing-virtual-machine:~/cspace/les3# gcc main.c -o main.out & ...
- JavaScript的三种类型检测typeof , instanceof , toString比较
1.typeof typeof是js的一个操作符,在类型检测中,几乎没有任何用处. typeof 返回一个表达式的数据类型的字符串,返回结果为javascript中的基本数据类型,包括:number. ...
- phpExcel导出excel加超级链接的实例代码[转]
phpexcel实现的导出excel文件的代码,且可以在excel文件中加入超级链接. 说明:PHPExcel的开发包Tests目录有详细使用实例.以下代码支持中文,注意文件编码,文件保存为utf-8 ...
- 有史以来功能最全，使用最简单的excel导入/导出工具
Github地址:https://github.com/xuanbg/Utility. 还有其他一些福利,请各位园友自取. 构造方法 1.用于导出Excel文件 NpoiHelper(ExcelVer ...