本文主要从原生 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的研究的更多相关文章

  1. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  2. 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

    先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最 ...

  3. Javascript scrollTop 20大洋

    花了20大洋,买了一个视频,这是读书笔记 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...

  4. js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  5. 像VUE一样写微信小程序-深入研究wepy框架

    像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...

  6. 深入研究-webkit-overflow-scrolling:touch及ios滚动

    1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效 ...

  7. 关于document.body.scrollTop与documentElement.scrollTop

    遇到document.body.scrollTop值为0的问题 今天在写一个小demo的时候,使用滚动条,我用document.body.scrollTop获取滚动条的位置,但是很奇怪的发现在谷歌上获 ...

  8. 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】

    源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...

  9. myslide 插件开发知识点总结和 css3 动画性能问题的研究

    myslide 插件开发知识点总结和 css3 动画性能问题的研究 这篇文章主要是总结最近开发过程中遇到的问题.有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的. 1.手机端的 slid ...

随机推荐

  1. linux中的rootfs/initrd/ramfs/initramfs

    什么是ramfs?ramfs是空间规模动态变化的RAM文件系统.它非常简单,是用来实现Linux缓存机制(缓存page cache and dentry cache)的文件系统.通常情况下,Linux ...

  2. log4cxx入门篇

    log4cxx入门篇     先看官网:http://logging.apache.org/log4cxx/index.html 转载自:http://wenku.baidu.com/view/d88 ...

  3. 解决java中ZipFile解压缩时候的中文路径和乱码问题

    JAVA中对jar文件或zip文件解压的时候,能够使用JDK内置的API:JarFile和ZipFile,在windows下解压这2种格式文件的时候,常常报下面错误: Exception in thr ...

  4. 《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令

           在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...

  5. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

  6. thinkphp3.1 发送email

    //*********************发送邮件************************** Vendor('email'); //******************** 配置信息 * ...

  7. ssl 内存泄露

    http://i.mtime.com/chevalier/blog/1824652/ openssl内存分配 chevalier 发布于: 2009-04-20 10:31  openssl内存分配  ...

  8. php实现二叉树遍历

    php实现二叉树遍历 一.总结 关注输入输出 二.php实现二叉树遍历 题目描述 编一个程序,读入用户输入的一串先序遍历字符串,根据此字符串建立一个二叉树(以指针方式存储). 例如如下的先序遍历字符串 ...

  9. tcp长连接和短连接

    tcp长连接和短连接 TCP在真正的读写操作之前,server与client之间必须建立一个连接, 当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接, 连接的建立通过三次握手,释放则需要四 ...

  10. NSURLSession网络接口

    URLSession URLSession NSURLSession是iOS7中新的网络接口,与NSURLConnection是并列的. 当程序在前台时,NSURLSession与NSURLConne ...