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

JavaScript实现返回顶部按钮案例_第1张图片

其次就是设计逻辑部分:当鼠标点击“返回顶部”按钮时,则会以每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;
}

                    
                    

你可能感兴趣的:(JavaScript实现返回顶部按钮案例)