怎么用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 {    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;}