本文主要从原生 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. javascript进阶教程第三章--匿名和闭包--案例实战

    javascript进阶教程第三章--匿名和闭包--案例实战 一.学习任务 通过几个小练习回顾学过的知识点 二.实例 练习1: 实例描述:打开页面后规定时间内弹出一个新窗口,新窗口指定时间后自动关闭. ...

  2. PHP unlink() 函数（删除文件）

    PHP unlink() 函数(删除文件) 一.总结 unlink() 函数删除文件. 1.实例 $file = "test.txt"; if (!unlink($file)) 2 ...

  3. [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js

    The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a ...

  4. [SCSS] Use Standard Built-in SCSS Functions for Common Operations

    We can use javascript for color and opacity variations, math, list and map logic or to see if someth ...

  5. 新版Sublime text3注册码被移除的解决办法

    Sublime Text是风靡世界的文本编辑器,支持多种编程语言,启动时间短,打开文件速度快,插件丰富,让很多程序员爱不释手.但是,对于未注册的Sublime Text, 经常在保存的时候会弹出一个烦 ...

  6. 让Apache 和nginx支持跨域訪问

    1,怎样让Apache支持跨域訪问呢? 步骤: 改动httpd.conf,windows中相应的文件夹是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf ...

  7. oracle 中日期的加减

    oracle 中日期的加减 加法   select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_ ...

  8. [Ramda] Refactor to a Point Free Function with Ramda's useWith Function

    Naming things is hard and arguments in generic utility functions are no exception. Making functions ...

  9. android通用適配器

    一.需求分析 在寻常的android开发过程中.ListView.GridView适配的编写是一件非常麻烦并且非常反复的事情,每次都须要考虑性能的优化.item的编写.获取网络图片时候信息的错乱等问题 ...

  10. 【codeforces 777D】Cloud of Hashtags

    [题目链接]:http://codeforces.com/contest/777/problem/D [题意] 让你通过删除字符串的末尾字符的方式; 使得所给的字符串以字典序升序排序; 不能交换字符串 ...