JavaScript实现返回顶部按钮

 更新时间:2021年11月07日 14:40:43   作者:小白小白从不日白  
这篇文章主要为大家详细介绍了JavaScript实现返回顶部按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现返回顶部按钮的具体代码,供大家参考,具体内容如下

1.先搭架子

a {
            text-decoration: none;
    }
        
        body {
            height: 5000px;
        }
        
        .backtotop {
            position: fixed;
            bottom: 80px;
            right: 80px;
            width: 80px;
            height: 80px;
            background-color: #ccc;
            font-size: 20px;
            text-align: center;
            padding-top: 12px;
            box-sizing: border-box;
            cursor: pointer;
            color: #000;
            /* 先隐藏按钮 */
            /*display: none;*/
        }
<a href="javascript:;" class="backtotop" id="backtotop">返回<br>顶部</a>

2.逻辑部分

当鼠标点击“返回顶部”按钮时,则会以每50毫秒的周期以一定“速度”返回到顶部,回到顶部之后则要进行清除,否则将出现只要一往下拉页面就会自动返回顶部的现象
在这里就要用到两个方法一个是 setInterval,一个是clearInterval,前者是设置定时器,后者为清除定时器
 在这里要注意一点的是,为了不引起冲突,在设置定时器之前要进行“设表先关”
 最后为了增加用户的体验感,我们需要设计成,当前如果是在顶部时,那么“返回顶部”按钮就会自动隐藏;当前如果不在顶部时,“返回顶部”按钮就显示

.backtotop {
    /* 先隐藏按钮 */
    display: none;
}
(function() {
      // 1.拿到需要操作的元素
      let oBackBtn = document.querySelector("#backtotop"); 
      // 2.监听网页的滚动
      window.onscroll = function() {
                // 获取滚动出去的距离
                let offsetY = getPageScroll().y;
                // console.log(offsetY);
 
                // 判断是否需要显示回滚按钮
                if (offsetY >= 200) {
                    oBackBtn.style.display = "block";
                } else {
                    oBackBtn.style.display = "none";
                }
            }
 
            let timerId = null;
 
            // 3.监听回滚按钮的点击
            oBackBtn.onclick = function() {
 
                //设表先关,防止定时器冲突
                clearInterval(timerId);
 
                //设置定时器
                timerId = setInterval(function() {
                    let begin = getPageScroll().y; //当前位置
                    let target = 0; //目标位置
                    let step = (target - begin) * 0.3;
                    begin += step;
 
                    //判断是否结束
                    if (Math.abs(Math.floor(step)) <= 1) {
 
                        //清除定时器
                        clearInterval(timerId);
 
                        // window.scrollTo(x, y);
                        // x表示让网页在水平方向滚动到什么位置
                        // y表示让网页在垂直方向滚动到什么位置
                        window.scrollTo(0, 0);
                        return;
                    }
 
                    window.scrollTo(0, begin);
 
                }, 50);
            };
 
            function getPageScroll() {
                let x, y;
                if (window.pageXOffset) {
                    x = window.pageXOffset;
                    y = window.pageYOffset;
                } else if (document.compatMode === "BackCompat") {
                    x = document.body.scrollLeft;
                    y = document.body.scrollTop;
                } else {
                    x = document.documentElement.scrollLeft;
                    y = document.documentElement.scrollTop;
                }
                return {
                    x: x,
                    y: y
                }
            }
        })();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅析BootStrap中Modal(模态框)使用心得

    浅析BootStrap中Modal(模态框)使用心得

    Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。本文给大家分享BootStrap中Modal(模态框)使用心得,一起看看吧
    2016-12-12
  • 前端GET/POST请求下载文件多种方式代码示例

    前端GET/POST请求下载文件多种方式代码示例

    文件都是通过接口获取的,前端通过调用接口将接口返回的文件下载,下面这篇文章主要给大家介绍了关于前端GET/POST请求下载文件的多种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 大转盘抽奖小程序版 转盘抽奖网页版

    大转盘抽奖小程序版 转盘抽奖网页版

    这篇文章主要为大家详细介绍了大转盘抽奖小程序版和网页版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • JS中var let声明范围区别详解

    JS中var let声明范围区别详解

    这篇文章主要为大家介绍了JS中var let声明范围区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • JS长整型精度问题实例分析

    JS长整型精度问题实例分析

    这篇文章主要介绍了JS长整型精度问题,实例分析了Java项目结合前台js脚本出现的长整型精度问题与相应的解决方案,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript 函数replace深入了解

    JavaScript 函数replace深入了解

    在JavaScript中replace函数作为字符串替换函数,这是一个威力强大的字符串操作函数,对于常见字符串操作的推荐用法。这篇随笔就来更加深入的理解它。
    2013-03-03
  • JSP基于Bootstrap分页显示实例解析

    JSP基于Bootstrap分页显示实例解析

    这篇文章主要为大家详细介绍了JSP基于Bootstrap分页显示实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 页面右下角弹出提示框示例代码js版

    页面右下角弹出提示框示例代码js版

    右下角弹出提示框想必大家不会陌生吧,本文简单的为大家实现一个,具体代码如下,有需求的朋友可以参考下
    2013-08-08
  • JS中节流和防抖函数的实现及区别示例

    JS中节流和防抖函数的实现及区别示例

    这篇文章主要为大家介绍了JS中节流和防抖函数的实现及使用区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • layui-tree实现Ajax异步请求后动态添加节点的方法

    layui-tree实现Ajax异步请求后动态添加节点的方法

    今天小编就为大家分享一篇layui-tree实现Ajax异步请求后动态添加节点的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论