源生JS实现回到顶部--缓冲效果
来源:互联网 发布:特效照相机软件下载 编辑:程序博客网 时间:2024/05/18 00:09
HTML代码:
<a href="javascript:;" id="btn" title="回到顶部">Top</a>
注意给body设置一个高度便于测试;
CSS代码:
a{ text-decoration: none; }#btn { width:40px; height:40px; position:fixed; background: #aaa; color: #fff; right:25px; bottom:10px; display:none;text-align: center; line-height: 40px; }#btn:hover { background: #999; }
JS代码:
window.onload = function(){ var btn = document.getElementById("btn"); var clientHeight = document.documentElement.clientHeight; //获取可视区域的高度 var timer = null; //定义一个定时器 var isTop = true; //定义一个布尔值,用于判断是否到达顶部 window.onscroll = function(){ //获取滚动条的滚动高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //如果滚动高度大于可视区域高度,则显示回到顶部按钮否则隐藏 btn.style.display = scrollTop >= clientHeight ? "block" : "none"; //判断当点击回到顶部按钮后滚动条在回滚过程中,若手动滚动滚动条,则清除定时器 if(!isTop){ clearInterval(timer); } isTop = false; } //回到顶部按钮点击事件 btn.onclick = function(){ timer = setInterval( function(){ //获取滚动条的滚动高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //用于设置速度差,产生缓动的效果 var speed = Math.floor(-scrollTop / 6); document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed; isTop =true; //用于阻止滚动事件清除定时器 if(scrollTop == 0){ clearInterval(timer); } },50 ); }}
阅读全文
0 0
- 源生JS实现回到顶部--缓冲效果
- js实现回到顶部效果
- JS实现回到顶部效果
- js实现 回到网页顶部 效果
- JS平滑效果实现回到顶部
- js实现回到顶部
- 原生Js回到顶部效果
- 回到顶部效果 js+css
- 原生js实现淘宝首页回到顶部效果
- JS(JQ)实现带动画的回到顶部效果
- 使用JS实现一个匀速回到顶部的效果
- 源生js回到顶部
- js 回到顶部的实现
- JS实现回到顶部按钮
- “回到顶部”-带缓动效果,附JS源码
- 回到顶部(滚动效果)js代码
- JS回到顶部效果设计总结
- JavaScript回到顶部的滑动效果实现
- 重构:一、重新组织方法
- TPC/IP发送文件
- caffe安装调试(win10+VS2013)
- Jeesite配置使用之代码生成
- 多线程方式
- 源生JS实现回到顶部--缓冲效果
- Android Studio初认识
- IDEA 乱码以及junit模板
- 1121. Damn Single (25)[数学逻辑]
- MySQL中文索引插件mysqlcft安装及使用
- 新闻客户端News
- 如何解决log4net无法打印日志
- springcloud springcloudRibbon
- 注解方式进行spring定时任务的调用