带有scroll-margin-top的Javascript平滑滚动会在末尾创建一个跳转

Question

我正在使用 JavaScript 在我的网站上实现平滑滚动，并且遇到了 CSS scroll-margin-top 导致末尾跳转的问题。我使用以下 CSS 来设置滚动边距：

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

我还有一个平滑滚动的 JavaScript 函数。问题是，当滚动到这些部分时，到达滚动末尾时会出现明显的跳跃。

这是 JavaScript 代码：

    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');
          });
        }
      });
    };  

如何解决这个问题并保持平滑滚动而不在最后跳转？

JsFiddle 演示

Answer 1

我认为你不必使用

scroll-margin-top

，你可以只使用

margin

。

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

谢谢。