<!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 创建数据库

    MySQL 创建数据库 我们可以在登陆 MySQL 服务后,使用 create 命令创建数据库,语法如下: CREATE DATABASE 数据库名; 以下命令简单的演示了创建数据库的过程,数据名为 ...

  2. 多页应用 Webpack4 配置优化与踩坑记录

    前言 最近新起了一个多页项目,之前都未使用 webpack4 ,于是准备上手实践一下.这篇文章主要就是一些配置介绍,对于正准备使用 webpack4 的同学,可以做一些参考. webpack4 相比之 ...

  3. navicat常用快捷键及注意事项

    常用快捷键: 1. ctrl + q: 打开新查询窗口 2. ctrl + r: 运行当前窗口内的所有语句 3. ctrl + w: 关闭当前窗口 4. F6: 打开一个mysql命令行窗口 ---- ...

  4. 网络抢票黄牛，大部分是骗人的。公布一个骗钱黄牛，QQ：2233261390，QQ群：29443597，支付页面：https://me.alipay.com/q336

    想着给女友买张回广州的回程火车票,抢了3天也没弄到.情急之下找了网络上所谓的黄牛.结果上当受骗.具体经过是这样的: 对方承诺抢到再付款.于是等他抢到后截图给我看,而且可以远程到他的机器去看,我也确实远 ...

  5. 1、IOS学习计划

    2015年12月10日 -- 2015年12月27日(一共3个周末,12个个工作日) 1.斯坦福公开课(IOS7应用开发) 一共18节课程,通过视频和demo建立感觉 2.千峰的OC课程 一共25节课 ...

  6. python深浅拷贝以及数据在内存中储存方法

    要搞懂深浅拷贝,首先要明白数据在内存里的储存方法. 一个变量的储存,首先是变量名加上储存内容的ID,通过ID去找到变量名所对应的内容, 当我们对数据进行赋值时,其实是把内容的整体地址赋给别的变量名(相 ...

  7. vue-devtools安装

    https://www.cnblogs.com/yuqing6/p/7440549.html

  8. redis 集群分配哈希曹

    重新分配哈希曹: ip:port 为当前redis集群任意节点ip和port redis-cli --cluster reshard ip:port 操作如图: 分配哈希槽有两种方式: 1.在其他节点 ...

  9. ubuntu下安装JDK（复制）

    ubuntu 安装jdk 的两种方式:(本来jdk应该安装到/usr/lib/jvm下,但我安装到了/usr/local/lib/jvm下了) 1:通过ppa(源) 方式安装. 2:通过官网下载安装包 ...

  10. java 四舍五入 保留两位小数

    1. 格式化字符串 java.text.DecimalFormat df = new java.text.DecimalFormat("#0.00"); float val=Flo ...