很多网站都会采用瀑布式的加载模式，像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. iOS开发——UI篇OC篇&不规则排列的图片布局

    不规则排列的图片布局 一直在500px上看照片,发照片.以前看它的首页图片展示就只是觉得好看,洋气,也没想过自己在iOS上实现一下.昨天不知怎么的就开始想其中的算法了,现在我把思考的过程在这里贴出来分 ...

  2. 第一章 JavaScript概述

    JavaScript诞生于1995年.它当时的目的是为了验证表单输入的验证.因为在JavaScript 问世之前,表单的验证都是通过服务器端验证.而当时都是电话拨号上网的年代,服务器验证数据是一件非常 ...

  3. wordpress迁移

    从一个地方搬到另一个窝,我必定会带着我的Wordpress,这就涉及到博客的迁移了.首先申明,该文非原创,放在这里主要是为了方便自己日后再次需要转移博客时,能很快锁定文章目标. 这篇文章主要介绍怎样将 ...

  4. 电商ERP常见功能模块

      电商ERP是适用企业卖家的专业电子商务ERP,支持淘宝.天猫.京东.1688.当当.苏宁.拍拍.唯品会.亚马逊.独立B2C等多网络销售渠道:也包括 异地多仓..货位管理.智能配货等专业的WMS(仓 ...

  5. python中HTMLParser简单理解

    找一个网页,例如https://www.python.org/events/python-events/,用浏览器查看源码并复制,然后尝试解析一下HTML,输出Python官网发布的会议时间.名称和地 ...

  6. posix thread概述

    1. 基本概念 一个Unix进程可以理解为一个线程加上地址空间.文件描述符和其他数据.异步表明事情相互独立发生, 除非有强加的依赖性. 并发指实际可能是穿行发生的事情好像同时发生一样.并行指并发序列同 ...

  7. Bootloader简介

    来介绍一下Bootloader,在专用的嵌入式开发板上运行GNU/Linux 系统已经变得越来越流行.一个嵌入式Linux 系统从软件的角度看通常可以分为四个层次: 1.引导加载程序.包括固化在固件( ...

  8. mysql查找重复

    중복된 것 모두 찾기    SELECT 필드명, count(*) FROM 테이블명  GROUP BY 필드명   mysql> SELECT t1, count(*) FROM tes ...

  9. akka构建简单分布式应用

    http://www.cnblogs.com/hequn/articles/3764630.html 当程序的要求达到一台计算机的极限时,我们便需要将程序分布式化,让程序运行在多台计算机上.akka提 ...

  10. sharepoint 删除list里的所有内容

    [System.reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint") $siteUrl = " ...