制作思路
缓慢返回到顶部,这种特效很常见,需要先了解如何获取滚动条位置,然后通过判断 0 点位置,决定返回顶部,最后用一个定时器循环:
OK直接看代码:
CSS代码:
.box{height:1000px;text-align:center;font-size:200px;font-weight:bold;} #back-up{border:1px solid red;width:37px;position:fixed;cursor:pointer;right:30px;bottom:30px;}
JS代码:
var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body.scrollTop; currentPosition-=10; /*调整滚动的值,值大小会影响速度*/ if(currentPosition>0){ window.scrollTo(0,currentPosition); }else{ window.scrollTo(0,0); clearInterval(timer); } }
Html代码:
<div class="box">B饭</div> <div class="box">E吃</div> <div class="box">W家</div> <div class="box">O回</div> <div class="box">L你</div> <div class="box">L带</div> <div class="box">E,</div> <div class="box">H走</div> <div id="back-up" onclick="GoTop()">返回顶部</div> </body> <script> window.scrollTo(0,document.body.scrollHeight);//页面刷新定位在底部 </script>
补充
以下摘自:huang100qi
要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop
;
而不是:document.body.scrollTop
;documentElement
对应的是 html 标签,而 body 对应的是 body 标签。
在标准w3c下,document.body.scrollTop
恒为0,需要用document.documentElement.scrollTop
来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft
,event.clientY+document.body.scrollTop
,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX
对象了。
所以在编程的时候,请加上这样的判断
if(document.body && document.body.scrollTop && document.body.scrollLeft){ top=document.body.scrollTop; left=document.body.scrollleft; } if(document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft){ top=document.documentElement.scrollTop; left=document.documentElement.scrollLeft; }
原文链接:HelloWeb前端网 » 原生js制作缓慢返回顶部实现代码 » 感谢您的浏览,希望能有所帮助。
欢迎您加入“Helloweb” 学习交流群:
196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!