本文主要从原生 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=;
  17.                  document.body.scrollTop=;
  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();//可以实现都回到顶部
  16.              })
  17.  
  18.          })
  19.  
  20.      </script>
  21.      </body>
  22.      </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':},);//完美实现 么么滴 也考虑到谷歌和其他的应用场景不同
  22.              })
  23.  
  24.          })
  25.  
  26.      </script>
  27.      </body>
  28.      </html>

考虑到移动端问题在 zepto中的scrolltop似乎也应用的不是很理想，那我们就用原生实现吧。谁让移动端内核都是webkit呢，代码如下

  1. <!doctype html>
  2. <html lang="zh_EN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>滚动条距离</title>
  6.  
  7.     </head>
  8.     <body style="height:2000px;">
  9.  
  10.     <script>
  11.  
  12.             function scroll(scrollTo, time) {
  13.                 var scrollFrom = parseInt(document.body.scrollTop),
  14.                         i = ,
  15.                         runEvery = ; // run every 5ms
  16.  
  17.                 scrollTo = parseInt(scrollTo);
  18.                 time /= runEvery;
  19.  
  20.                 var interval = setInterval(function () {
  21.                     i++;
  22.  
  23.                     document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom;
  24.  
  25.                     if (i >= time) {
  26.                         clearInterval(interval);
  27.                     }
  28.                 }, runEvery);
  29.             }
  30.  
  31.             document.body.onclick=function () {
  32.                 scroll('', );
  33.             };
  34.  
  35.     </script>
  36.     </body>
  37.     </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 安装完mysql 密码重置

    If you have forgot the MySQL root password, can’t remember or want to break in….. you can reset them ...

  2. Eclipse 使用技巧之 ---- 查看本类调用和被调用列表

    当工程复杂的情况下,用眼睛去人工查看调用情况是很费力也没必要的.我们需要用 Eclipse 来做这点. (1)    我们查看本类调用他类情况可以直接看 import . (2)    如果要查看本类 ...

  3. [内核编程] Windebug双机调试环境搭建

    Windebug双机调试环境搭建    开始进行内核编程/驱动编程的调试工作是非常烦人的,由于程序运行与内核层不受操作系统的管控,所以容易引起主机蓝屏和崩溃是常有的事.这也就使得内核程序的调试成了一大 ...

  4. thinkphp,onethink,thinkox验证码不显示

    使用验证码的时候,一开始正常,后来不显示了 网上说是utf-8的编码问题,什么bom去掉,转化为无bom的格式 我都试了,没用 后来知道是在调用验证码的地方  写上 Public function v ...

  5. source insight -i failed reason

    双击.c调用sourceinsight.exe -i "路径" 如果路径太长就会新开一个窗口,测试相同文件,不同路径现象不同.

  6. [Docker] Prune Old Unused Docker Containers and Images

    In this lesson, we will look at docker container prune to remove old docker containers. We can also ...

  7. [SCSS] Reuse Styles with the SCSS @mixin Directive

    Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mi ...

  8. Android 实现限制EditText输入文字的数量

    前段时间比较忙 没来的及时分享出来.需求是这样的要求用户只能输入12个字符或者6位中文的数据:作为一个菜鸟遇到这样的问题第一反应就是 Android:maxLength="12"这 ...

  9. Use Word 2010's Navigation Pane to quickly reorganize documents

    Use Word 2010's Navigation Pane to quickly reorganize documents http://www.techrepublic.com/blog/mic ...

  10. Go语言学习(十)bytes包处理字节切片

    bytes包提供了对字节切片进行读写操作的一系列函数 字节切片处理的函数比較多,分为基本处理函数,比較函数,后缀检查函数,索引函数,切割函数, 大写和小写处理函数和子切片处理函数等. 1.字节切片基本 ...