博客

如何用jQuery设置平滑滚动在距离顶部的特定位置停止

  • Post category:jquery

要实现在距离顶部的特定位置停止平滑滚动，需要按照以下步骤进行。

步骤一：添加jQuery库文件

首先，在网站的头部添加jQuery库，可以是在线引入，也可以是本地引入。可以使用以下代码在线引入jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

步骤二：添加平滑滚动到位置的函数

接下来，在jQuery的 .ready() 函数中添加平滑滚动到指定位置的函数。可以使用以下代码实现：

$(document).ready(function(){
  // 对所有带有平滑滚动类名的锚点链接添加点击事件
  $("a.smooth-scroll").on('click', function(event) {

    // 禁用默认的闪现跳转
    if (this.hash !== "") {
      event.preventDefault();

      // 获取目标的哈希值
      var hash = this.hash;

      // 在动画中使用动态的偏移量
      var offset = $(hash).offset().top - 80;

      // 使用 jQuery 的 animate() 方法，实现平滑滚动效果
      $('html, body').animate({
        scrollTop: offset
      }, 800, function(){

        // 添加突出显示效果，高亮选中的锚点链接
        $('a.smooth-scroll').removeClass('active');
        $(this).addClass('active');
      });
    } // End if
  });
});

在这个函数中，我们首先绑定了所有带有 smooth-scroll 类名的锚点链接的 click 事件。使用 event.preventDefault() 禁用默认的跳转行为。接着获取目标的哈希值，并且在动画中使用动态的偏移量，保证目标停留在屏幕顶部的特定位置。最后使用 animate() 方法，实现平滑滚动效果，并且添加突出显示效果，高亮选中的锚点链接。

步骤三：设置停止平滑滚动的条件

最后一步，在函数中添加停止平滑滚动的条件。可以使用以下代码实现：

$(window).scroll(function(){
  // 获取窗口滚动条的位置
  var scrollPos = $(window).scrollTop();

  // 遍历所有带有平滑滚动类名的锚点链接，逐一判断是否停止滚动
  $('a.smooth-scroll').each(function () {

    // 获取当前锚点链接的哈希值
    var hash = this.hash;
    var offset = $(hash).offset().top - 80;

    // 如果窗口滚动条的位置大于或等于当前锚点链接的偏移量，停止滚动
    if (scrollPos >= offset) {
      $('a.smooth-scroll').removeClass('active');
      $(this).addClass('active');
    }
  });
});

在这个函数中，我们使用 .scroll() 方法为窗口滚动条添加滚动事件，获取滚动条的位置。然后遍历所有带有 smooth-scroll 类名的锚点链接，获取它们的偏移量，并且逐一判断是否应该停止滚动，如果当前滚动条位置大于等于当前锚点链接的偏移量，那么就使用 addClass() 方法添加选中状态类名 active。

Tags: