华域联盟 JavaScript JavaScript实现返回顶部按钮案例

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实现返回顶部按钮案例

转载请保留出处和原文链接:https://www.cnhackhy.com/146679.htm

本文来自网络,不代表华域联盟立场,转载请注明出处。

作者: sterben

发表回复

联系我们

联系我们

2551209778

在线咨询: QQ交谈

邮箱: [email protected]

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们