本文主要从原生 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. js私有变量

    js私有变量 一.总结 1.在js函数中定义 this.name='张三'; (函数的属性)外部是可以访问的,但是 var name='张三'; (函数的私有变量),这样定义的话外部没有办法访问 2. ...

  2. POJ 1745 Divisibility DP

    POJ:http://poj.org/problem?id=1745 A完这题去买福鼎肉片,和舍友去买滴~舍友感慨"这一天可以卖好几百份,每份就算赚一块钱..那么一个月..一年...&quo ...

  3. Unreal Enginer4特性介绍-牛B闪闪的UE4

    声明:转载说明出处! unreal4特性介 原文地址:   https://www.unrealengine.com/products/unreal-engine-4     unreal engin ...

  4. C++项目參考解答：累加求圆周率

    [项目-累加求圆周率] 用例如以下公式求π的近似值(计算直到最后一项的绝对值小于10−5) π4=1−13+15−17+... [參考解答] #include <iostream> usi ...

  5. mac 系统 突破百度网盘网速限制

    感谢https://blog.csdn.net/Deft_MKJing/article/details/82561564

  6. thinkphp3.2 图片平均颜色值

    public function imgColor($imgUrl) { $imageInfo = getimagesize($imgUrl); //图片类型 $imgType = strtolower ...

  7. 手把手生成决策树(dicision tree)

    手把手生成决策树(dicision tree) 标签: Python 机器学习 主要參考资料: Peter HARRINGTON.机器学习实战[M].李锐,李鹏,曲亚东,王斌译.北京:人民邮电出版社, ...

  8. iOS开发SDWebImage的基本使用

    #import "ViewController.h" #import "UIImageView+WebCache.h" #import "SDWebI ...

  9. JS学习十四天----server端运行JS代码

    server端运行JS代码 话说,当今不在client使用JS代码才是稀罕事.因为web应用的体验越来越丰富,client用JS实现的逻辑也越来越多,这造成的结果就是某些差点儿一致的逻辑须要在clie ...

  10. ConcurrentLinkedQueue的实现原理分析

    1.    引言 在并发编程中我们有时候需要使用线程安全的队列.如果我们要实现一个线程安全的队列有两种实现方式一种是使用阻塞算法,另一种是使用非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同 ...