Javascript 航路点JS和锚链问题

我在一个页面上有一堆文章，我使用Waypoints JS触发一个滚动条，当文章进入视口时将其捕捉到页面顶部，这非常有效。 我在顶部还有一个固定的菜单，上面有散列链接，可以平滑地滚动到页面的特定锚定部分。 问题是当我点击菜单上的链接（比如第三篇文章）时：页面会快速滚动到第三篇文章（假设是这样），但随后它会自动向上滚动到第一篇文章，然后再次向下滚动到第三篇文章，然后向上滚动到第二篇文章，最后再向下滚动到第三篇文章

显然，页面一直在反弹，因为当页面向下滚动到锚点时，它会触发航路点。我怎样才能防止这种情况发生？我想在点击链接时禁用特定的航路点，然后在滚动后再次启用，但我不确定这是否是最好的方法或如何做到这一点

HTML

---

谢谢你的帮助。

我确信现在帮不了你，但我遇到了同样的问题

我想像你一样在链接上方设置偏移量，但我意识到动画事件导致waypoints.js触发

我的简单解决方案是在滚动到的元素上添加一个负边距和一个正填充

css:

对于JS，使用regular location.hash

window.location.hash = "#art1";

//smooth scroll
$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('body, html').animate({
                scrollTop: target.offset().top
            }, 500);
            return false;
        }
    }
});

//scroll snap to article 1
var waypoint = new Waypoint({
    element: document.getElementById('art1'),
    handler: function (direction) {
        if (direction === 'down') {
            $('html,body').animate({
                scrollTop: $('#art1').offset().top - 100
            }, 'slow');
        }
    },
    offset: '99%',
});

//scroll snap to article 2
var waypoint = new Waypoint({
    element: document.getElementById('art2'),
    handler: function (direction) {
        if (direction === 'down') {
            $('html,body').animate({
                scrollTop: $('#art2').offset().top - 100
            }, 'slow');
        }
    },
    offset: '99%',
});

//scroll snap to article 3
var waypoint = new Waypoint({
    element: document.getElementById('art3'),
    handler: function (direction) {
        if (direction === 'down') {
            $('html,body').animate({
                scrollTop: $('#art3').offset().top - 100
            }, 'slow');
        }
    },
    offset: '99%',
});

#art1,#art2,#art3{
  margin-top: -50px;
  padding-top: 75px;
}

window.location.hash = "#art1";