scroll案例：带有动画的返回顶部

最新推荐文章于 2023-09-03 22:27:23 发布

qiaokelizhuzhu

最新推荐文章于 2023-09-03 22:27:23 发布

阅读量463

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qiaokelizhuzhu/article/details/124278458

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

案例：带有动画的返回顶部

css样式

   .box {
            width: 800px;
            height: 400px;
            background-color: blanchedalmond;
            margin: 500px auto;
        }
        
        .box2 {
            position: fixed;
            right: 10px;
            top: 50%;
            display: none;
            width: 50px;
            height: 50px;
            background-color: red;
        }

html

  <div class=box></div>
  <div class="box2">返回顶部</div>

jQuery代码
ps: animate 只有元素才能做动画

$(function() {
      var box = $(".box").offset().top; //获取box2的头部距离 
      $(window).scroll(function() {
          if ($(document).scrollTop() >= box) { //如果 滚动到box2的距离 就box2才会显示出来
              $(".box2").css("display", "block")
          } else {
              $(".box2").css("display", "none")
          }
      })
      $(".box2").click(function() {
          $("body,html").stop().animate({ //animate 只能元素才能做动画
              scrollTop: 0
          })
      })
  })