<!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. cf540D. Bad Luck Island(概率dp)

    题意 岛上有三个物种:剪刀$s$.石头$r$.布$p$ 其中剪刀能干掉布,布能干掉石头,石头能干掉剪刀 每天会从这三个物种中发生一场战争(也就是说其中的一个会被干掉) 问最后仅有$s/r/p$物种生存 ...

  2. javascript oo实现

    很久很久以前,我还是个phper,第一次接触javascript觉得好神奇.跟传统的oo类概念差别很大.记得刚毕业面试,如何在javascript里面实现class一直是很热门的面试题,当前面试百度就 ...

  3. 20181229（守护进程，互斥锁，IPC，生产者和消费者模型）

    一.守护进程 守护进程:一个进程B守护另一个进程A,当被守护的进程A结束,进程B也就结束了.(不一定同生,但会同死) 两个特点: ①守护进程会在主进程代码执行结束后就终止 ②守护进程内无法再开启子进程 ...

  4. [USACO]奶牛博览会(DP)

    Description 奶牛想证明他们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N头奶牛进行了面试,确定了每头奶牛的智商和情商. 贝西有权选择让哪些奶牛参加展览.由于负的智商或情商会造成 ...

  5. poj 2139 奶牛拍电影问题 floyd算法

    题意:奶牛拍一系列电影,n头牛拍m部电影,同一部电影种的搭档们距离为1,求最小距离? 思路:Floyd 图 最短路径 存图: 初始化图 for (int i = 0; i <= n; i++) ...

  6. Mdrill集群安装

    Mdrill集群安装 mdrill是阿里妈妈-adhoc-海量数据多维自助即席查询平台下的一个子项目.旨在帮助用户在几秒到几十秒的时间内,分析百亿级别的任意维度组合的数据.mdrill是一个分布式的在 ...

  7. excel VBA 将文本数值转换为数字格式（单元格中数据左上角是绿三角，鼠标点上有叹号标示）

    Range("A6").SelectSelection.CopyRange("A10:A60").SelectRange(Selection, Selectio ...

  8. Spring---浅谈IOC

    概念 IOC(Inversion of Control 控制反转)是spring的核心,贯穿始终.所谓IOC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系. 传统 ...

  9. net user

    net user 编辑 Net User命令是一个DOS命令,必须在Windows nt以上系统的MS-DOS模式下运行,所以首先要进入MS-DOS模式:选择“开始”菜单的“附件”选项的子选项“命令提 ...

  10. 【LoadRunner】对摘要认证的处理

    近期项目中,进行http协议的接口性能测试过程中,需要进行登录接口的摘要认证,分享一下测试经验. 测试准备 测试工具:LoadRunner11 测试类型:接口测试--某系统登录接口 步骤 根据系统接口 ...