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.判断用户是否触发了滚动事件。
时间: 2024-12-28 00:17:50