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