本文主要从原生 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 适用于谷歌 滚动条属于body 12 //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="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="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实现，不过个人感觉体验不是很好。如果还有疑惑欢迎交流讨论，能力有限只能做初步探讨