博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript--返回顶部效果
阅读量:6955 次
发布时间:2019-06-27

本文共 1169 字,大约阅读时间需要 3 分钟。

window.onload = function(){    var obtn = document.getElementById('btn');    //客户端页面可视区高度    var clientHeight = document.documentElement.clientHeight;    var timer = null;    var isStop = true;    //判断在浏览器触发回到顶部时,用户是否滚动滚轮    window.onscroll = function(){        var osTop = document.documentElement.scrollTop || document.body.scrollTop;        if(osTop >= clientHeight){            obtn.style.display = 'block';        }else{            obtn.style.display = 'none';        }        if(!isStop){            clearInterval(timer);        }        isStop = false;    }    obtn.onclick = function(){                //定时器        timer = setInterval(function(){            var osTop = document.documentElement.scrollTop || document.body.scrollTop;            var ispeed = Math.floor(-osTop / 6);            isStop = true;            document.documentElement.scrooTop = document.body.scrollTop = osTop + ispeed;            if(osTop == 0){                clearInterval(timer);            }        },30);    }} //知识点 1.获取元素,添加事件 2.根据可视区域高度,判断元素显隐 3.获取滚动条高度,设置定时器,通过一个表达式设置可变的滚动速度,模拟先快后慢的效果 4.清除定时器的时机,1.滚动条高度为0;2.判断用户是否触发了滚动事件。

  

转载于:https://www.cnblogs.com/xwnlh/p/7400868.html

你可能感兴趣的文章
ios翻译
查看>>
《技术范儿》NO.3:畅谈数字时代存储变革之数据管理 ——随堂笔记
查看>>
grep
查看>>
保险数据调整结转前后处理
查看>>
大型网站技术架构(四)网站的高性能架构
查看>>
Mysql学习总结(11)——MySql存储过程与函数
查看>>
ubuntu增加swap空间
查看>>
命令 cd
查看>>
kafka集群扩容后的topic分区迁移
查看>>
10种常见的进程注入技术的总结
查看>>
HashMap 初始化时赋值
查看>>
citrix xenapp 6.5 smartauditor播放器提示无法播放某版本记录
查看>>
windows系统,网络无法访问
查看>>
Tomcat内存溢出的三种情况及解决办法分析
查看>>
T-SQL 语句插入中文数据时数据库显示全是问号“???”的解决方法(数据库编码规则)...
查看>>
lvs启动脚本
查看>>
大屏展示OneOaaS Monitor社区版发布
查看>>
数据结构C语言之多项式
查看>>
VMware Workstation 9安装CentOS 6.3 liveDVD
查看>>
iOS 友盟统计
查看>>