<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>回到顶部</title>

 <style>

    * { padding: 0; margin: 0; }

    #box {width: 100%;height: 2400px;margin: auto;border: 1px solid red;box-sizing: border-box;}

    #top {width: 60px;height: 50px;line-height: 50px;background-color: orange;color: #fff;font-size: 12px;text-align: center;position: fixed;

          right: 20px;bottom: 20px;text-decoration: none;display: none;

    }

 </style>

 </head>

 <body>

   <div id="box"></div>

   <a href="javascript:;" id="top">返回顶部</a>

 </body>

 <script>

  window.onload = function () {

   var oTop = document.getElementById('top')

   // 获取页面可视区的高度

   var clientHeight = document.documentElement.clientHeight

   var timer = null

   var isTop = true

   // 滚动条滚动时触发

   window.onscroll = function () {

   var osTop = document.documentElement.scrollTop || document.body.scrollTop

   if (osTop >= clientHeight) {

     oTop.style.display = 'block'

   } else {

     oTop.style.display = 'none'

   }

   if (!isTop) {

     clearInterval(timer)

   }

   isTop = false

 }

 oTop.onclick = function () {

   timer = setInterval(function () {

     // 获取滚动条距离顶部的高度

     var osTop = document.documentElement.scrollTop || document.body.scrollTop

     var ispeed = Math.floor(-osTop / 5)

     document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed

     isTop = true

     if (osTop === 0) {

        clearInterval(timer)

     }

   }, 30)

  }

 }

 </script>

 </html>

 　　

js回到顶部的更多相关文章

  1. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  2. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  3. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  5. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  6. js回到顶部 动画速度 （自己记录）

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

  7. JS 回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  9. animate平滑回到顶部

    Js: //回到顶部 $(".totop").click(function () { $("body,html").animate({scrollTop: 0} ...

随机推荐

  1. 数据结构(C语言)分享笔记：数据结构的逻辑层次、存储层次

    [1] 严格意义上数据结构的概念 数据结构,一个简单的定义:相互之间存在一种或多种特定关系的数据元素的集合.即:数据结构 = 元素集合 + 元素间关系的集合 . 在讨论数据结构时,可以基于两个不同的层 ...

  2. php扩展开发-哈希表

    什么是哈希表呢?哈希表在数据结构中也叫散列表.是根据键名经过hash函数计算后,映射到表中的一个位置,来直接访问记录,加快了访问速度.在理想情况下,哈希表的操作时间复杂度为O(1).数据项可以在一个与 ...

  3. python函数调用顺序、高阶函数、嵌套函数、闭包详解

    一:函数调用顺序:其他高级语言类似,Python 不允许在函数未声明之前,对其进行引用或者调用错误示范: def foo(): print 'in the foo' bar() foo() 报错: i ...

  4. 【Isamaru, Hound of Honda】SVN常用命令补遗

    一些常用的 就是svn commit的时候 都必须是最新版本的东西 不能不是,但是其实只是.svn在控制,所以可以update到最新版本再svn merge -r 20:10 将版本10和20的融合, ...

  5. 读书笔记jvm探秘之二： 对象创建

    对象是面向对象设计语言无法回避的东西,可见其重要性,JAVA的对象相较于C++来说,不算很复杂,但是我们看到一句话背后往往有很多东西值得探讨(NEW关键字). 对象如何被创建? 首先一句简单的NEW语 ...

  6. Asp.net自定义控件开发任我行（1）-笑傲江湖

    1.引言 参加工作5个月了,来到一家小公司,有几只老鸟带我,但不是我公司的,几个礼拜才来一次.来到公司做的第一个项目是web项目,里面有很多的重复代码,页面代码都是千篇一律,你这人也太水了吧,垃圾代码 ...

  7. Lucene.Net 精品教程

    http://www.cnblogs.com/piziyimao/archive/2013/01/31/2887072.html

  8. 设计模式之第12章-享元模式(Java实现)

    设计模式之第12章-享元模式(Java实现) “怎么回事,竟然出现了OutOfMemory的错误.鱼哥,来帮我看看啊.”“有跟踪错误原因么?是内存泄露么?”“不是内存泄露啊,具体原因不知道啊.对了,有 ...

  9. leetcode 【 Linked List Cycle II 】 python 实现

    公司和学校事情比较多,隔了好几天没刷题,今天继续刷起来. 题目: Given a linked list, return the node where the cycle begins. If the ...

  10. IOS开发学习笔记042-UITableView总结2

    一.自定义非等高的cell         如常见的微博界面,有的微博只有文字,有的有文字和图片.这些微博的高度不固定需要重新计算. 这里简单说一下几种方法.前面的步骤和设置等高的cell一样.现在来 ...