很多网站都会采用瀑布式的加载模式，像qq空间加载好友动态，为了用户体验更好，很多网站会加上回到顶部的连接，但大多数网站都是一下子就回到了顶部，当然，这样有这样的好处，但是我是个比较喜欢很炫的东西的人，所以就比较喜欢滑动滚到顶上。直接上代码吧。

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

 function goTop(acceleration, time) {

      acceleration = acceleration || 0.1;

      time = time || 16;

      var x1 = 0;

      var y1 = 0;

      var x2 = 0;

      var y2 = 0;

      var x3 = 0;

      var y3 = 0;

      if (document.documentElement) {

       x1 = document.documentElement.scrollLeft || 0;

       y1 = document.documentElement.scrollTop || 0;

      }

      if (document.body) {

       x2 = document.body.scrollLeft || 0;

       y2 = document.body.scrollTop || 0;

      }

      var x3 = window.scrollX || 0;

      var y3 = window.scrollY || 0;

      // 滚动条到页面顶部的水平距离

      var x = Math.max(x1, Math.max(x2, x3));

      // 滚动条到页面顶部的垂直距离

      var y = Math.max(y1, Math.max(y2, y3));

      // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小

      var speed = 1 + acceleration;

      window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

      // 如果距离不为零, 继续调用迭代本函数

      if(x > 0 || y > 0) {

       var invokeFunction = "goTop(" + acceleration + ", " + time + ")";

       window.setTimeout(invokeFunction, time);

      }

     }

 </script>

 </head>

 <body>

     1adfsssssssssssssssssssssssssssssssssssssssssssssssssss<br />

     1<br />

     1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />1<br />1<br />

     1<br />1<br />

     fdsfaddddddddddddddddddd

     <a href="javascript:;" onclick="goTop();return false;">TOP</a>

 </body>

 </html>

应该很简单吧，上面获取滚动条的位置，各个内核的获取方式不一样，这里就整合了一下。希望对大家有帮助。

为什么要写博客啊？因为失恋了 ，我好想她啊，只有让自己忙起来才会缓和一下，失恋好难受啊，下次我一定要好好抓住，打死都不分手了。话说我是被甩的啊。哎。。。

纯javascript 回到 顶部 实例的更多相关文章

  1. javascript 回到顶部效果的实现

    demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...

  2. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  3. 关于Android PullTorefreshScrollview回到顶部实例

    列表滑动下面显示按钮,点击按钮回到顶部的功能,一般scrollview会有滑动监听的事件,通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了,但是Pu ...

  4. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  5. javascript 回到顶部

    <script type="text/javascript"> window.onload = function(){ var timer = null; //用于判断 ...

  6. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  7. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  8. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  9. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

随机推荐

  1. SAP增强总结-第二代增强（SMOD、CMOD）【转载】

    第二代增强比第二代增强安全性提高了很多,第一代增强毕竟是在原标准程序中修改,大部分传递参数都可以直接使用,第二代增强做了一些封装,对用户可以修改的参数做了限制. 1.增强点查找方法 首先根据事物码找到 ...

  2. 【问题汇总】ListView的FooterView设置可见性的问题

    ListView的FooterView一般用来给用户展示一些提示信息. 正常情况下,是这么使用的.代码例如以下: // footer footerLayout = new PullLoadingLay ...

  3. iOS开发——面试指导

    iOS面试指导 一 经过本人最近的面试和对面试资料的一些汇总,准备记录这些面试题,以便ios开发工程师找工作复习之用,本人希望有面试经验的同学能和我同时完成这个模块,先出面试题,然后会放出答案. 1. ...

  4. percona监控模板图形解释

    http://blog.itpub.net/28916011/viewspace-1971933/ percona监控mysql的几张图形解释     最近,我仔细研究了一下percona监控mysq ...

  5. [Effective C++ --006]若不能使用编译器自动生成的函数，就该明确拒绝

    ■本文内容■□第一节 <引言> 在条款五的讲解中,我们已经知道编译器是聪明的家伙,它会帮助你生成类的构造函数.析构函数.一个copy构造函数和一个赋值运算符.有时真的要感谢编译器所做的这一 ...

  6. Helpers\CSRF

    Helpers\CSRF CSRF Protection The CSRF helper is used to protect post request from cross site request ...

  7. MySQL（7）：数值类型

    1. 数值类型  

  8. 由strupr，strlwr体会如果将字符常量转换为变量进行修改，体会常量的静态存储

    #include <stdio.h> #include <string.h> int main() { char s[]="Copywrite 1999-2000 G ...

  9. UTF-8编码与Unicode CS2的转换

    /* Convert a UTF-8 string into a UCS-2 array. */ void tcstrutftoucs(const char *str, uint16_t *ary, ...

  10. 怎样安装WIN7系统

    如何避免win7自动创建200M隐藏分区 1 安装win7到选择安装到哪个分区的时候,不能选择 unallocated diskspace ,也不能选 delete 已有的分区(例如C盘)安全的做法是 ...