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

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