点击按钮返回顶部案例：

代码如下：

 <!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>Document</title>

     <style>

         #btn{

             background: yellow;

             position: fixed;

             width: 50px;

             height: 50px;

             right: 0;

             bottom: 0;

             margin: 20px;

         }

     </style>

     <script>

         window.onload=function(){

             var oBtn=document.getElementById('btn');

             var timer=null;             //声明一个变量来存储定时器

             var bSys=true;              //用变量来做标志，判断是否是用户滚动

             //检测用户拖动滚动条

             window.onscroll=function(){     //当拉动滚动条，触发此事件

                 console.log('滑动')

                 //若用户手动拉动滚动条，则关闭定时器

                 if(!bSys){

                     clearInterval(timer);

                     console.log(1)     //【手动拖拽会触发】

                 }

                 //执行onscroll事件时，把值设为false 意味着为用户手动拉动滚动条事件做准备

                 bSys=false;

                 console.log(2)         //【手动、系统都触发】

             }

             oBtn.onclick=function(){

                 //设置定时器

                 console.log('点击')

                 timer=setInterval(() => {

                     var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;    //获取滚动条距离顶部高度

                     var iSpeed=Math.floor((0-scrollTop)/9);        //Math.floor()向下取整   (0-scrollTop)表示：获取滚动条距离顶部高度的负值

                     bSys=true;      //意味着是系统在滚动，而不是用户

                     console.log(3)          //【系统触发】

                     document.documentElement.scrollTop=scrollTop+iSpeed;        //设置滚动条距离顶部位置

                     //当滚动条到达顶部，关闭定时器

                     if(scrollTop==0){

                         clearInterval(timer);

                     }

                 }, 30);

             }

         }

     </script>

 </head>

 <body>

     <input type="button" value="toTop" id="btn">

     <!--1-100的数字页面-->

     <div>

         1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>10<br>  <br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>  <br>

         21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>  <br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>  <br>

         41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>  <br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60<br>  <br>

         61<br>62<br>63<br>64<br>65<br>66<br>67<br>68<br>69<br>70<br>  <br>71<br>72<br>73<br>74<br>75<br>76<br>77<br>78<br>79<br>80<br>  <br>

         81<br>82<br>83<br>84<br>85<br>86<br>87<br>88<br>89<br>90<br>  <br>91<br>92<br>93<br>94<br>95<br>96<br>97<br>98<br>99<br>100<br>

     </div>

 </body>

 </html>
代码解释：
第42行代码：当点击按钮，触发定时器。（把定时器存入变量timer中，以便关闭定时器时使用）；
第43行代码：创建一个变量scrollTop，用来获取滚动条距离顶部高度的值；
第44行代码：创建一个变量iSpeed，用来设置速度。　　【Math.floor()向下取整 】　　【(0-scrollTop)表示：获取滚动条距离顶部高度的负值】　　floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。
第49行代码：设置滚动条距离顶部位置；
第52行代码：当滚动条到达顶部，关闭定时器；
第23行代码：创建一个变量bSys，用来做标志，判断是否是用户滚动；
第26行代码：检测用户、系统拉动滚动条触发事件；
第29-32行代码：if语句判断,当用户手动拉动滚动条，执行关闭定时器；
第35行代码：把变量bSys设置为false，为用户手动拉动滚动条事件做准备；（即：值为false，！bSys则为true，即可触发关闭定时器事件）
第46行代码：把变量bSys设置为true，并且设置在第49行代码之前，意味着是系统在滚动，而不是用户手动拉动滚动条
【//定时器每次都以最快速度：获取滚动条高度、设置速度、设置滚动条位置 并进行if语句的判断和检测系统、用户拖动滚动条】

检测用户、系统拉动滚动条事件解释：

参考链接：https://www.cnblogs.com/weiyf/p/6872504.html

JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）的更多相关文章

  1. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  2. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  3. iOS点击状态栏返回顶部问题。

    在适配点击状态栏返回顶部的时候,有一个viewcontroller里面有一个UITableView和一个UITextView,UITableView的cell里面没有UIScrollView和UITa ...

  4. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  5. jQuerry点击按钮回到顶部功能

    简单实现点击按钮回到顶部功能

  6. jQuery---小火箭返回顶部案例

    小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐 ...

  7. 使用JS代码实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  8. CSS3和js炫酷点击按钮3D翻转动画特效

    简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 ...

  9. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

随机推荐

  1. 三维重建：SLAM算法的考题总结

    参考英文维基:https://en.wikipedia.org/wiki/Slam 参考文档:视觉slam研究分析的一点认识 1. 请简单描述您对机器人的SLAM的概念理解? 答: 机器人需要在自身位 ...

  2. ROS: Ubuntu16.04安装ROS-kinetic

    参考连接:SLAM: Ubuntu14.04_Kylin安装ROS-Indigo第一步: 软件源配置 1. 增加下载源(增加ubuntu版的ros数据仓库,即下载源)(通用指令适合任何版本的ros) ...

  3. 安卓使用ImageView显示OpenCV-Mat

    Android 的Application-native调试暂时还只能进行主线程调试,在GDB里面,运行于子线程的OpenCv数据处理过程不能直接调试,OPenCV-Native函数    public ...

  4. 【sqli-labs】 less24 POST- Second Order Injections *Real treat* -Stored Injections (POST型二阶注入 *真的好玩?* 存储注入)

    简单登陆浏览一遍后,发现是一个登陆注册修改密码的应用 审查一下代码 登陆页面的username,password使用了转义 注册页面的参数也进行了转义处理 但是在修改password的页面,直接从se ...

  5. 关于vuex

    希望初学者可以初步理解vuex的日志: 示意图: 一.图例: 1.Vue Components:Vue组件.HTML页面上,负责接收用户操作等交互行为,执行dispatch方法触发对应action进行 ...

  6. Nuxt报错

    新增了个文件store.js: //本地存储的工具库 if(!window.localStorage){ alert('你的浏览器不支持localStorage'); } var store ={ s ...

  7. 团体程序设计天梯赛-练习集-L1-042. 日期格式化

    L1-042. 日期格式化 世界上不同国家有不同的写日期的习惯.比如美国人习惯写成“月-日-年”,而中国人习惯写成“年-月-日”.下面请你写个程序,自动把读入的美国格式的日期改写成中国习惯的日期. 输 ...

  8. BZOJ 1106: [POI2007]立方体大作战tet 树状数组 + 贪心

    Description 一个叫做立方体大作战的游戏风靡整个Byteotia.这个游戏的规则是相当复杂的,所以我们只介绍他的简单规 则:给定玩家一个有2n个元素的栈,元素一个叠一个地放置.这些元素拥有n ...

  9. Pytorch基础（6）----参数初始化

    一.使用Numpy初始化:[直接对Tensor操作] 对Sequential模型的参数进行修改: import numpy as np import torch from torch import n ...

  10. swift UITableViewCell 中的单选控制样式

    我昨天在网上找了一晚上的资料,但是大多都是OC得语法,swift资料实在是太少了,使得我这个刚入门swift的彩笔好不吃力,后面一直各种翻阅资料,终于让我找到了 visibleCells 这个方法,直 ...