对scrollTop的研究

本文主要从原生 JS以及jquery来说明scrollTop是如何实现的，以及一些技巧，以及在PC端和移动端使用的差异。

首先用代码表示下如何回到顶部的简单原理

 <!doctype html>

 <html lang="zh_EN">

 <head>

     <meta charset="UTF-8">

     <title>滚动条距离</title>

     <script>

         window.onload=function(){

             document.onclick=function(){

                 //滚动条滚动距离

                 //document.documentElement 适用于除谷歌 滚动条属于文档

                 //document.body.scrollTop  适用于谷歌  滚动条属于body

                 //alert(document.documentElement.scrollTop);

                 //alert(document.body.scrollTop);

                 //处理兼容

                 //因都存存在这两种属性 要回到顶部需分别设置（暂时想不出好方法）

                 document.documentElement.scrollTop=;

                 document.body.scrollTop=;

             }

         }

     </script>

 </head>

 <body style="height:2000px;">

 </body>

 </html>

用原生如此实现在jquery中如何实现呢

 <!doctype html>

 <html lang="zh_EN">

 <head>

     <meta charset="UTF-8">

     <title>滚动条距离</title>

         <script src="jquery.min.js"></script>

     </head>

     <body style="height:2000px;">

     <script>

         $(function(){

             $(document).click(function(){

                 //$('body').scrollTop(0)//谷歌可以实现，其他不支持

                 $(window).scrollTop();//可以实现都回到顶部

             })

         })

     </script>

     </body>

     </html>

这样都会支持，但效果显得格外生硬。如何产生运动效果来达到更好的体验呢，请看下面的代码片段

 <!doctype html>

 <html lang="zh_EN">

 <head>

     <meta charset="UTF-8">

     <title>滚动条距离</title>

         <script src="jquery.min.js"></script>

     </head>

     <body style="height:2000px;">

     <script>

         $(function(){

             $(document).click(function(){

                 //用window普通可以实现但产生运动效果在浏览器上都会报错

                 //$(window).animate({'scrollTop':0},1000);

                 //从网上查到这个方法

                 //$(document.body).animate({'scrollTop':0},1000);//经过测试只有在谷歌上有作用

                 //难道jquery没兼容好这个方法？？？

                 //经过反复查找终于找到答案如下

 　　　　　　　　　　

                 $('body,html').animate({'scrollTop':},);//完美实现 么么滴 也考虑到谷歌和其他的应用场景不同

             })

         })

     </script>

     </body>

     </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 = ,

                        runEvery = ; // 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('', );

            };

    </script>

    </body>

    </html>

不知道是不是解决了回到底部的问题，当然还有插件可以使用，但基本都基于此类原理，关于在什么时候出现回到顶部的箭头我就不再说明了(相当简单)，当然也有用#top实现，不过个人感觉体验不是很好。如果还有疑惑欢迎交流讨论，能力有限只能做初步探讨

巴特西

对scrollTop的研究

最新文章

热门文章