使用滚动页边距顶部的JavaScript平滑滚动在结尾处创建跳转

发布于12月15日

我正在使用JavaScript在我的网站上实现平滑滚动，我遇到了CSS scroll-margin-top导致结尾跳转的问题.我使用以下css来实现滚动页边距:

class or div {
  scroll-margin-top: 6rem;/*any size*/
}

我也有一个流畅的滚动脚本功能.问题是，当滚动到这些部分时，当到达滚动的末尾时，会出现明显的 skip .

以下是该脚本的代码:

    var ssSmoothScroll = function () {
      $('a[href^="#"], area[href^="#"]').on('click', function (e) {
        var target = $($(this).attr('href'));
        if (target.length) {
          e.preventDefault();
          $('html, body').stop().animate({
            scrollTop: target.offset().top
          }, cfg.scrollDuration, 'swing', function () {
            window.location.hash = target.attr('id');
          });
        }
      });
    };

如何才能在不跳转的情况下解决这个问题并保持流畅的滚动？

The JsFiddle demo个

推荐答案

目标元素的值scroll-margin-top，并从滚动目标中减go 该值.

$(document).ready(function () {
  $('a[href^="#"], area[href^="#"]').on('click', function (e) {
    var target = $($(this).attr('href'));
    if (target.length) {
      e.preventDefault();
      var scrollMargin = target.css('scroll-margin-top'); // Get scroll-margin-top value
      var offset = scrollMargin ? parseInt(scrollMargin) : 0; // Parse the value
      $('html, body').stop().animate({
        scrollTop: target.offset().top - offset // Consider scroll-margin-top
      }, 1000, 'swing', function () {
        window.location.hash = target.attr('id');
      });
    }
  });
});

 body {
      margin: 0;
      padding: 0;
    }
    
    #first,
    #second,
    #third,
    #fourth,
    #fifth {
      scroll-margin-top: 6rem;
    }

    /* Additional styles for demonstration purposes */
    section {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
    }

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 <nav>
    <ul>
      <li><a href="#first">first</a></li>
      <li><a href="#second">second</a></li>
      <li><a href="#third">third</a></li>
      <li><a href="#fourth">fourth</a></li>
      <li><a href="#fifth">fifth</a></li>
    </ul>
  </nav>

  <section id="first">first</section>
  <section id="second">second</section>
  <section id="third">third</section>
  <section id="fourth">fourth</section>
  <section id="fifth">fifth</section>