如何用JavaScript实现返回顶部按钮

本篇内容主要讲解“如何用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;                                }

<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                }            }        })();

到此，相信大家对“如何用JavaScript实现返回顶部按钮”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！