建设局网站管理办法,采购管理,江苏省建筑培训网,有哪些好的做兼职网站第一步#xff1a;获取底部的那个按钮对象#xff0c;默认的情况下那个按钮对象是不可见的。可见的条件的是滚轮距离顶部有距离。 var oBtndocument.getElementById(btn1); 第二步#xff1a;添加滚轮事件。 (1). 获取滚轮距离顶部的距离。如果距离大于0#xff0c;就将按钮…第一步获取底部的那个按钮对象默认的情况下那个按钮对象是不可见的。可见的条件的是滚轮距离顶部有距离。 var oBtndocument.getElementById(btn1); 第二步添加滚轮事件。 (1). 获取滚轮距离顶部的距离。如果距离大于0就将按钮对象可见。 var scrollTdocument.documentElement.scrollTop||document.body.scrollTop; if(scrollT 0){ oBtn.style.displayblock; }else{ oBtn.style.displaynone; }; 第三步 (1).获取滚动条到顶部的距离这个距离就是滚动条需要向上滚动到顶部的全部路程。 var scrollTdocument.documentElement.scrollTop||document.body.scrollTop;//我们假设是300px (2).我们的目标是回到顶部这个时候滚动条距离顶部的距离是0. (3). 滚动条运动了多少距离。结束位置-开始位置dis0-300-300px; (4). 确定总共需要运行的次数。 var countMath.floor(1000/30); var n0; 第四步开定时器运行 (1)定时器每运行一次n1(n代表当前走的次数) (2).我们已经在上面获取了滚动条距离顶部的距离是 var scrollTdocument.documentElement.scrollTop||document.body.scrollTop;//我们假设是300px (2)计算走的比例再将比例乘以总共需要走的距离得到当前走的距离 var an/count; 当前走的距离 dis*a; 还剩了多少距离就是总的距离减去我们刚才走的距离。 curscrollTdis*a; (3)设置滚动条距离顶部的距离 document.documentElement.scrollTopdocument.body.scrollTopcur; (4)如果ncount代表路程全部走完关闭定时器 if(ncount){ clearInterval(timer); } 第五步:处理问题 (1). 当onclick事件执行的时候定时器执行会触发onscroll事件setInterval未执行完的时候onclick不可以再次点击 (2)onscroll事件触发的时候滚动条往上滚动的过程中即使setInterval还未执行完我们也可以通过鼠标滚动让滚动条再次往下滚动 处理方法设置开关控制当bSintrue的时候可执行当bSinfalse的时候不可以执行 完整代码 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyleinput{position: fixed;right: 0;bottom: 0;display: none;}/stylescriptwindow.οnlοadfunction(){ var oBtndocument.getElementById(btn1); var timernull; //bSin是一个标志位 //bSintrue----代表底部那个按钮对象是可以使用的 //bSinfalse----代表底部那个按钮对象是不可以使用的 var bSinfalse; window.οnscrοllfunction(){ if(bSin){ clearInterval(timer) } console.info(1); bSintrue; var scrollTdocument.documentElement.scrollTop||document.body.scrollTop; if(scrollT 0){ oBtn.style.displayblock; }else{ oBtn.style.displaynone; }; }; oBtn.οnclickfunction(){ var scrollTdocument.documentElement.scrollTop||document.body.scrollTop; var dis0-scrollT; var countMath.floor(1000/30); var n0; timersetInterval(function(){ bSinfalse; n; var an/count; var curscrollTdis*a; document.documentElement.scrollTopdocument.body.scrollTopcur; if(ncount){ clearInterval(timer); } },30); } }; /script /head body styleheight: 3000px input typebutton value返回顶部 idbtn1 /body /html 转载于:https://www.cnblogs.com/xuxiaozhi/p/10209065.html
