jQuery返回顶部——记录

ansheng02

于 2019-06-03 11:06:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端相关手记 JS 前端HTML效果文章标签：返回顶部 jQuery返回顶部 jquery

本文链接：https://blog.youkuaiyun.com/ansheng02/article/details/90748902

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

33 篇文章

订阅专栏

16 篇文章

订阅专栏

前端HTML效果

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本操作引包

$().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
        });
      });
  
});