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

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.  <title>Insert title here</title>
  6.  <script type="text/javascript">
  7.  function goTop(acceleration, time) {
  8.       acceleration = acceleration || 0.1;
  9.       time = time || 16;
  10.  
  11.       var x1 = 0;
  12.       var y1 = 0;
  13.       var x2 = 0;
  14.       var y2 = 0;
  15.       var x3 = 0;
  16.       var y3 = 0;
  17.  
  18.       if (document.documentElement) {
  19.        x1 = document.documentElement.scrollLeft || 0;
  20.        y1 = document.documentElement.scrollTop || 0;
  21.       }
  22.       if (document.body) {
  23.        x2 = document.body.scrollLeft || 0;
  24.        y2 = document.body.scrollTop || 0;
  25.       }
  26.       var x3 = window.scrollX || 0;
  27.       var y3 = window.scrollY || 0;
  28.  
  29.       // 滚动条到页面顶部的水平距离
  30.       var x = Math.max(x1, Math.max(x2, x3));
  31.       // 滚动条到页面顶部的垂直距离
  32.       var y = Math.max(y1, Math.max(y2, y3));
  33.  
  34.       // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
  35.       var speed = 1 + acceleration;
  36.       window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
  37.  
  38.       // 如果距离不为零, 继续调用迭代本函数
  39.       if(x > 0 || y > 0) {
  40.        var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
  41.        window.setTimeout(invokeFunction, time);
  42.       }
  43.      }
  44.  </script>
  45.  </head>
  46.  <body>
  47.      1adfsssssssssssssssssssssssssssssssssssssssssssssssssss<br />
  48.      1<br />
  49.      1<br />1<br />
  50.      1<br />1<br />1<br />1<br />
  51.      1<br />1<br />1<br />1<br />
  52.      1<br />1<br />1<br />1<br />
  53.      1<br />1<br />1<br />1<br />
  54.      1<br />1<br />1<br />1<br />
  55.      1<br />1<br />1<br />1<br />
  56.      1<br />1<br />1<br />1<br />
  57.      1<br />1<br />1<br />1<br />
  58.      1<br />1<br />1<br />1<br />
  59.      1<br />1<br />1<br />1<br />
  60.      1<br />1<br />1<br />1<br />
  61.      1<br />1<br />1<br />1<br />
  62.      1<br />1<br />1<br />1<br />
  63.      1<br />1<br />1<br />1<br />
  64.      1<br />1<br />1<br />1<br />
  65.      1<br />1<br />1<br />1<br />
  66.      1<br />1<br />1<br />1<br />
  67.      1<br />1<br />1<br />1<br />
  68.      1<br />1<br />1<br />1<br />
  69.      1<br />1<br />1<br />1<br />
  70.      1<br />1<br />1<br />1<br />
  71.      1<br />1<br />
  72.      fdsfaddddddddddddddddddd
  73.  
  74.      <a href="javascript:;" onclick="goTop();return false;">TOP</a>
  75.  </body>
  76.  </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. 在WWDC 2014上，没提到的iOS 8 八大新特性

    今天凌晨1点,36氪如约为大家研磨出WWDC 2014全程 "贴身直播"(我不得不佩服牺牲个人时间,熬夜为大家奉上好文的5位氪星人:JasonZheng.WANGJINGYU.pa ...

  2. PHP根据数组的值分组

    PHP根据数组的值分组,php array中没有自带这个函数但是很常用,今天写了出来记录一下. 代码: $_array = array(        array(1,11,'2016-05-18') ...

  3. Effective C++ 条款45

    本节条款的题目是运用成员模板接受全部兼容类型 作者阐述自己的观点是通过智能指针的样例. 在学习本节条款之前我们要先明确关于隐式转化的问题 例如以下代码: #include<iostream> ...

  4. error when loading the sdk 发现了元素 d:skin 开头无效内容

    把devices.xml这个文件删除,再把sdk里面tools\lib下的这个文件复制到你删除的那个目录里.重新启动eclipse

  5. 用JAVA写一个函数,功能例如以下： 随意给定一组数, 找出随意数相加之后的结果为35(随意设定)的情况

    用JAVA写一个函数.功能例如以下:随意给定一组数,比如{12,60,-8,99,15,35,17,18},找出随意数相加之后的结果为35(随意设定)的情况. 能够递归算法来解: package te ...

  6. Android蓝牙操作笔记

    蓝牙是一种支持设备短距离传输数据的无线技术.android在2.0以后提供了这方面的支持. 从查找蓝牙设备到能够相互通信要经过几个基本步骤(本机做为服务器): 1.设置权限 在manifest中配置 ...

  7. 详解 MySQL 中的 explain

    来源:persister 链接:http://www.blogjava.net/persister/archive/2008/10/27/236813.html 在 explain的帮助下,您就知道什 ...

  8. 第一个js程序

    <html><head> <title>Untitled</title> <script >function demo(){ alert ( ...

  9. iOS常见文件及程序的启动原理

    一. iOS中常见文件 (一). Xcode6之前 创建项目,默认可以看见一个存放框架的文件夹 info文件以工程文件名开头,如:第一个项目-Info.plist 项目中默认有一个PCH文件 (二). ...

  10. c++ （P262—P277） STL

    STL的六大组件 容器(Container),是一种数据结构,如list,vector,和deques ,以模板类的方法提供.为了访问容器中的数据,可以使用由容器类输出的迭代器: 迭代器(Iterat ...