怎么用JavaScript实现返回顶部按钮

本篇内容介绍了“怎么用javascript实现返回顶部按钮”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

思路：

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

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

当页面没有发生卷动时：

当页面发生卷动时：

“怎么用JavaScript实现返回顶部按钮”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！