纯javascript 回到顶部实例

　　很多网站都会采用瀑布式的加载模式，像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 回到顶部实例的更多相关文章

javascript 回到顶部效果的实现
demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...
javascript 回到顶部动画效果
上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...
关于Android PullTorefreshScrollview回到顶部实例
列表滑动下面显示按钮,点击按钮回到顶部的功能,一般scrollview会有滑动监听的事件,通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了,但是Pu ...
jquery javascript 回到顶部功能
今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...
javascript 回到顶部
<script type="text/javascript"> window.onload = function(){ var timer = null; //用于判断 ...
用Javascript实现回到顶部效果
用Javascript实现回到顶部效果经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）
回到顶部实例一效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

随机推荐

【WPF】打开本地的文件或者文件夹
问题描述: 我做的程序中需要添加帮助文档,我将文档生成了CHM格式,在用户点击帮助按钮时候弹出帮助文档. 实现方法: System.Diagnostics.Process.Start(AppDoma ...
ZOJ 3829 Known Notation 贪心
Known Notation Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/showPro ...
hdu 4104
先排序,再动态规划.须要优化 #include<iostream> #include<cstdio> #include<cstring> #include<s ...
android开发 Fragment嵌套调用常见错误
在activity中有时须要嵌套调用fragment,但嵌套调用往往带来视图的显示与预期的不一样或是fragment的切换有问题.在使用时要注意几点: 1.fragment中嵌套fragment,子f ...
Linux 基础 —— RPM
http://liaoph.com/linux-rpm/ 这篇文章主要讲 RPM 软件包管理器的使用. 软件包的演变史最早期时,软件包是一些可以运行的程序组成的集合,可能还要加上若干配置文件和动态库 ...
5.6 太多分区引起OOM
一个月之前,Scott和同事们发现公司有一个MySQL MHA集群的master(假设master机器名为hostA)每隔一周左右就会挂一次(指MySQL挂掉),在几周内,MHA来回切了好几次. 按照 ...
C#_MVC 自定义AuthorizeAttribute实现权限管理
随笔- 28 文章- 31 评论- 16 MVC 自定义AuthorizeAttribute实现权限管理在上一节中提到可以使用AuthorizeAttribute进行权限管理: [Autho ...
iOS 手动打造JSON Model转换库
前一段时间学习了Runtime,对类和对象的结构,和一些消息转发有一些自己的理解,现在希望简单的应用下,就决定自己写一个简单的JSON与Model的相互转化,现在总结下. 建议查看参考资料 :Run ...
next nextval
1 KMP算法中next与nextval值的计算以上两张图代表了next值的求法,本人总结后做如下叙述: 根据公式可知: next[1]=0 next[2]=1 next[3]的求法根据公式可以直接 ...
ios存储 plist 偏好设置自定义对象存储
1,plist Plist注意:不能存储自定义对象 Plist:数组和字典, 如何判断一个对象能不能使用Plist,就看下有没有writeToFile 获取应用的文件夹(应用沙盒) NSString ...

纯javascript 回到 顶部 实例

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

随机推荐

热门专题

纯javascript 回到顶部实例

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