<!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. 【原创】大数据量时生成DataFrame避免使用效率低的append方法

      转载请注明出处:https://www.cnblogs.com/oceanicstar/p/10900332.html      ★append方法可以很方便地拼接两个DataFrame df1. ...

  2. Python_装饰器、迭代器、生成器

    一.装饰器 装饰器的存在是为了实现开放封闭原则: 封闭: 已实现的功能代码块不应该被修改: 开放: 对现有功能的扩展开放. 理解装饰器的三要素: 函数的作用域 高阶函数 闭包 1. 闭包 闭包定义:如 ...

  3. CentOS6 x86_64最小化安装优化脚本

    #!/bin/bash #centos6. x86_64系统最小化安装优化脚本 #系统基础优化,建议以root运行 if [ $USER != "root" ];then echo ...

  4. 基于django的个人博客网站建立（一）

    基于django的个人博客网站建立(一) 前言 网站效果可点击这里访问 之前基于hexo和github page搭建过一个博客网页,后来由于换了个系统,感觉弄的有点麻烦也就没有再去管它了,最近偶然从网 ...

  5. Python之路--Python初识

    Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程 ...

  6. visual studio cl -d1reportSingleClassLayout查看内存f分布

    C:\Users\Administrator\Desktop\cppsrc>cl -d1reportSingleClassLayoutTeacher virtual.cpp 用于 x86 的 M ...

  7. Python 交互模式中 Delete/Backspace 键乱码问题

    进入 Python 交互模式,按下 Delete/Backspace 键,会出现 ^H 字符 解决方式: 1. 进到 Python 的Modules目录 [root@cyt-test Python-2 ...

  8. data相关应用

    文案参考:HTML5中的data-*属性和jQuery中的.data()方法使用 data属性选择器 $("li[data-id='1']")//选择li元素中data-id属性等 ...

  9. Asp.net自定义控件开发任我行（4）-ViewState保存控件状态

    摘要 上一篇我们实现了下拉框的效果,此章的目的主要是保存控件属性状态 内容 我们先来看一个例子,后台代码不变,我们只改UI页面的代码,先在页面上拖放两个控件,一个是我们现在要开发的这个控件,另一个是按 ...

  10. 设计模式之第3章-模板方法模式(Java实现)

    设计模式之第3章-模板方法模式(Java实现) "那个,上次由于我老婆要给我做饭,所以就没有说完就走掉了...这个那个".这次和以前一样,先来开场福利(工厂方法模式已被作者踹下场) ...