很多网站都会采用瀑布式的加载模式，像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. Chapter 1 Securing Your Server and Network(11):使用透明数据库加密

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38398813,专题文件夹:http://blog.csdn.net/dba_huangz ...

  2. 文件和目录之chmod和fchmod函数

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 这两个函数使我们可以更改现有文件的访问权限: ...

  3. 用linq实现登陆功能

    BLL层的逻辑代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; name ...

  4. C#连接SQL SERVER数据库的详细步骤！

      首先,在SQL SEVER里建立一个名为“Exercise”的数据库名,在该数据库下建立一张名为“lianxi”的表.好,现在开始写代码. 在FORM1里拖一个DATAGIRDVIEW用于显示表, ...

  5. xss脚本攻击

    xss脚本攻击不仅仅只是alert(1)就算完了,xss脚本攻击真正的用处是盗取普通用户的cookie,或者盗取管理员的cookie. xss分类(类型): 1. 反射型xss2. 存储型xss3. ...

  6. Java基础知识强化之IO流笔记63：随机访问流RandomAccessFile

    1. 随机访问流RandomAccessFile RandomAccessFile类不属于流,是Object类的子类.但它融合了InputStream和OutputStream的功能.支持对随机访问文 ...

  7. iOS之用xib给控件设置圆角、边框效果

    xib中为各种控件设置圆角 通过代码的方式设置 @interface ViewController () @property (weak, nonatomic) IBOutlet UIView *my ...

  8. gdb显示内存命令用法简介

    http://blog.csdn.net/allenlinrui/article/details/5964046

  9. Spring中bean的scope

    Spring容器中的bean具备不同的scope,最开始只有singleton和prototype,但是在2.0之后,又引入了三种类型:request.session和global session,不 ...

  10. 从lambda到函数式编程

    Object.send(:remove_const,'TRUE') Object.send(:remove_const,'FALSE') def to_integer(pro) pro[-> n ...