javascript - 滚动动画会破坏页面上的链接

Question

我用另一个滚动动画替换了单页网站的滚动动画，当您使用顶栏时，该动画会更改 URL(它是在基础中构建的)

虽然现在当我单击顶栏中的某个项目时 URL 会发生变化，但页面上的所有其他链接或可单击元素都会使其滚动回页面顶部。

例如，当我尝试单击 slider 的下一个/上一个按钮时，它会滚动回页面顶部，就像我单击“主页”一样。

有人能看出动画代码有什么问题吗？

$(document).ready(function () {
    $('a[href^="#"]').click(function () {
        var target = $(this.hash),
            hash = this.hash;

        if (target.length == 0) {
            target = $('a[name="' + this.hash.substr(1) + '"]');
        }
        if (target.length == 0) {
            target = $('html');
        }

        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500, function () {
            location.hash = hash;
        });

        return false;
    });
});

PS:当我手动滚动时，当我进入下一页时，URL 不会改变。如果有人能解决这个问题，我很乐意与您联系! (我尝试使用history.js，但这似乎只有在你有服务器的情况下才有效，而我没有)

//* 编辑 *//我刚刚发现并非所有链接都使其滚动到页面顶部，只是我的轨道 slider 的按钮和顶栏折叠时的菜单按钮

//编辑2//现在，当我滚动到下一页时，URL 会发生变化!我现在看到的唯一问题是，由于某种原因，轨道 slider 的按钮和折叠顶栏的菜单按钮与我的主页按钮的作用相同(使页面一直滚动回到顶部)。所以我需要做的最后一件事就是让按钮再次工作。使菜单按钮展开顶栏并使 slider 的下一个和上一个按钮正常工作

Answer 1

如果您只想根据 scrollPosition 更改 hash，那么您就成功了一半。

您需要将一些逻辑绑定(bind)到 scroll 事件。 Here is a fork of your Fiddle其中 hash 在 scroll 上更改。

当用户滚动页面时，我们会迭代所有 .page 元素，并将它们的 offset().top 与 $( document ).scrollTop() 进行比较.

我们将新的 hash 设置为具有 lower 的最后一个 .page 元素的 id offset().top 比 $( document ).scrollTop() 是。

(我也 debounced 该功能，因此它在滚动时不会不断触发 - 您当然可以删除该部分)

但是，您应该考虑到，通过更改哈希，您将跳转到等效元素。 Here is a guide关于如何抑制这种行为。

编辑:

这是一个updated Fiddle我在其中实现了上面的解决方案，用于抑制 hash 更改上的强制滚动。