本文主要从原生 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. iOS开发项目实战——Swift实现ScrollView滚动栏功能

    手机作为一个小屏设备,须要显示的信息往往无法在一个屏幕上显示,此时就须要使用到滚动栏,当然除了像TableView这样能够自带滚动功能的. 假设一个界面上View较多,那就必须要使用到ScrollVi ...

  2. 【LeetCode-面试算法经典-Java实现】【096-Unique Binary Search Trees（唯一二叉搜索树）】

    [096-Unique Binary Search Trees(唯一二叉搜索树)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given n, how many s ...

  3. 【2037】利用字符串处理，输出x+y的结果

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 输入两个整数x,y输出它们的和.(0<=x,y<=10的100次幂) [输入] 共2行:   ...

  4. [AngularFire2] Building an Authentication Observable Data Service

    After successfully login, we want something help to check whether user has already login or not. And ...

  5. Lucene学习总结之一：全文检索的基本原理 2014-06-25 14:11 666人阅读 评论(0) 收藏

    一.总论 根据http://lucene.apache.org/java/docs/index.html 定义: Lucene 是一个高效的,基于Java 的全文检索库. 所以在了解Lucene之前要 ...

  6. [Docker] Build Your Own Custom Docker Image

    In this lesson we will cover how to build your own custom Docker image from scratch. We'll walk thro ...

  7. NetSnmp配置

    http://blog.csdn.net/shanzhizi/article/details/16985989

  8. 【hdu 4315】Climbing the Hill

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  9. [Thu, 9 Jul 2015 ~ Tue, 14 Jul 2015] Deep Learning in arxiv

    这一期的神作论文有蛮多的,都很有意思. Feature Representation In ConvolutionalNeural Networks 该论文中论述了在某种CNN结构下,是否有准确率较高 ...

  10. 【codeforces 604D】Moodular Arithmetic

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...