jQuery返回顶部——记录

实现平滑滚动回到顶部

最新推荐文章于 2024-04-09 07:17:03 发布

原创最新推荐文章于 2024-04-09 07:17:03 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#返回顶部 #jQuery返回顶部 #jquery

前端相关手记同时被 3 个专栏收录

33 篇文章

订阅专栏

16 篇文章

订阅专栏

前端HTML效果

10 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的平滑滚动效果，当页面滚动超过一定距离时，显示回到顶部按钮，并在点击该按钮时使页面平滑滚动到顶部。文章详细解释了如何根据页面滚动位置调整按钮的位置，以及如何实现滚动动画。

基本操作引包

$().ready(function() {

      var $window = $(window);
      var $backTop = $('<div class="back-top"><i class="iconfont icon-top"><\/i><\/div>').appendTo("body");
      var $footer = $("footer");

      // 回到顶部
      $window.scroll(_.throttle(function() {
        if ($window.scrollTop() > 50) {
          $backTop.fadeIn();
          if ($footer.length > 0) {
            if ($footer.offset().top <= $backTop.offset().top + $backTop.outerHeight()) {
              $backTop.animate({
                bottom: $footer.outerHeight() + 10
              });
            } else if ($footer.offset().top >= $backTop.offset().top + $backTop.outerHeight() + 15) {
              $backTop.animate({
                bottom: 10
              });
            }
          }
        } else {
          $backTop.fadeOut();
        }
      }, 500));
        
      // 回到顶部
      $backTop.click(function() {
        $("body, html").animate({
          scrollTop: 0
        });
      });
  
});