首页 > 代码库 > 对scrollTop的研究
对scrollTop的研究
本文主要从原生 JS以及jquery来说明scrollTop是如何实现的，以及一些技巧，以及在PC端和移动端使用的差异。
首先用代码表示下如何回到顶部的简单原理
1 <!doctype html> 2 <html lang="zh_EN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滚动条距离</title> 6 <script> 7 window.onload=function(){ 8 document.onclick=function(){ 9 //滚动条滚动距离10 //document.documentElement 适用于除谷歌 滚动条属于文档11 //document.body.scrollTop 适用于谷歌 滚动条属于body12 //alert(document.documentElement.scrollTop);13 //alert(document.body.scrollTop);14 //处理兼容15 //因都存存在这两种属性 要回到顶部需分别设置（暂时想不出好方法）16 document.documentElement.scrollTop=0;17 document.body.scrollTop=0;18 }19 }20 </script>21 </head>22 <body style="height:2000px;">23 24 </body>25 </html>
用原生如此实现在jquery中如何实现呢
1 <!doctype html> 2 <html lang="zh_EN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滚动条距离</title> 6 7 <script src=http://www.mamicode.com/"jquery.min.js"></script> 8 </head> 9 <body style="height:2000px;">10 11 <script>12 $(function(){13 $(document).click(function(){14 //$(‘body‘).scrollTop(0)//谷歌可以实现，其他不支持15 $(window).scrollTop(0);//可以实现都回到顶部16 })17 18 })19 20 21 22 23 </script>24 </body>25 </html>
这样都会支持，但效果显得格外生硬。如何产生运动效果来达到更好的体验呢，请看下面的代码片段
1 <!doctype html> 2 <html lang="zh_EN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滚动条距离</title> 6 7 <script src=http://www.mamicode.com/"jquery.min.js"></script> 8 </head> 9 <body style="height:2000px;">10 11 <script>12 $(function(){13 $(document).click(function(){14 //用window普通可以实现但产生运动效果在浏览器上都会报错15 //$(window).animate({‘scrollTop‘:0},1000);16 //从网上查到这个方法17 //$(document.body).animate({‘scrollTop‘:0},1000);//经过测试只有在谷歌上有作用18 //难道jquery没兼容好这个方法？？？19 //经过反复查找终于找到答案如下20 21 $(‘body,html‘).animate({‘scrollTop‘:0},1000);//完美实现 么么滴 也考虑到谷歌和其他的应用场景不同22 })23 24 })25 26 27 28 29 </script>30 </body>31 </html>
考虑到移动端问题在 zepto中的scrolltop似乎也应用的不是很理想，那我们就用原生实现吧。谁让移动端内核都是webkit呢，代码如下
<!doctype html><html lang="zh_EN"><head> <meta charset="UTF-8"> <title>滚动条距离</title> </head> <body style="height:2000px;"> <script> function scroll(scrollTo, time) { var scrollFrom = parseInt(document.body.scrollTop), i = 0, runEvery = 5; // run every 5ms scrollTo = parseInt(scrollTo); time /= runEvery; var interval = setInterval(function () { i++; document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom; if (i >= time) { clearInterval(interval); } }, runEvery); } document.body.onclick=function () { scroll(‘0‘, 500); }; </script> </body> </html>
不知道是不是解决了回到底部的问题，当然还有插件可以使用，但基本都基于此类原理，关于在什么时候出现回到顶部的箭头我就不再说明了(相当简单)，当然也有用#top实现，不过个人感觉体验不是很好。如果还有疑惑欢迎交流讨论，能力有限只能做初步探讨
对scrollTop的研究
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。