返回顶部按钮案例

思路：

• 首先先设计出其静态样式，这里主要利用固定定位，将其固定在页面底部的某一位置处

.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;
  }

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

最后我们来看一下完整的案例：

<a href="javascript:;" class="backtotop" id="backtotop">返回<br>顶部</a>

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

<script>
(function(){
  //获得元素
  var backtotop = document.getElementById('backtotop');

  var timer;
  backtotop.onclick = function(){
    //设表先关，防止定时器冲突
    clearInterval(timer);

    //设置定时器
    timer = setInterval(function(){

      // 更改根元素的scrollTop元素值
      //兼容性问题
      var top = document.documentElement.scrollTop || document.body.scrollTop;
      top = top - 80;
      document.documentElement.scrollTop = top;
      document.body.scrollTop = top;

      //判断
      if(top <= 0) {
        //关闭定时器
        clearInterval(timer);
      }
    },20);
  };

  //监听页面滚动
  window.onscroll = function() {
    //得到卷动值
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;

    //当页面没有卷动时，返回顶部 按钮就隐藏
    if(scrollTop == 0) {
      backtotop.style.display = 'none';
    }else {
        backtotop.style.display = 'block';
    }
  };
})();

<script>

当页面没有发生卷动时：

当页面发生卷动时：

第二种

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

​