<!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. 认识mysql(4)

    今日是MySQL的第四篇,难度会稍微加大,加油! 开始吧! 1.外键(foreign  key) 1.定义:让当前表字段的值在另一个表的范围内选择 2.语法: foreign key(参考字段名) r ...

  2. 14.3-ELK重难点总结和整体优化配置

    本文收录在Linux运维企业架构实战系列 做了几周的测试,踩了无数的坑,总结一下,全是干货,给大家分享~ 一.elk 实用知识点总结 1.编码转换问题(主要就是中文乱码) (1)input 中的cod ...

  3. 【Python学习之八】ORM

    ORM 什么是ORM呢? ORM全称是:Object-Relational Mapping.即对象-关系映射,就是把关系数据库的一行映射为一个对象,也就是一个类对应一个表.这样,写代码更简单,不用直接 ...

  4. 【Ecshop】v2.7.3模板变量标签改进

    改进代码后虽可解决大多数函数参数的问题,但也同样产生了参数问题:ecshop模板函数参数有部分没有被引号包裹,所以正则并不能匹配到,要修改为引号包裹,那是个大工程. 为了使ecshop模板支持date ...

  5. HUD：2896-病毒侵袭

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2896 病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memor ...

  6. P1880 [NOI1995]石子合并【区间DP】

    题目描述 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1个算法,计算出将N堆石子合并成1 ...

  7. JavaScript 计时事件-setInterval()-clearInterval() -setTimeout()-clearTimeout()

    (PS:JavaScript 一个设定的时间间隔之后来执行代码,我们称之为计时事件.) JavaScript 计时事件 通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码 ...

  8. Retrofit 入门和提高

    首先感谢这个哥们,把我从helloworld教会了. http://blog.csdn.net/angcyo/article/details/50351247 retrofit 我花了两天的时间才学会 ...

  9. 基础_String

    String str1="hello"; String str2="hello"; String str3="hello"; String ...

  10. Install ADDS on Windows Server 2012 R2 with PowerShell

    Install ADDS on Windows Server 2012 R2 with PowerShell Posted by ethernuno on 20/04/2014 In this tut ...