Question

我用另一个滚动动画替换了我的单页网站的滚动动画，当你使用顶栏时它改变了URL（它是在基础中构建的）

当我点击顶部栏中的某个项目时，我的页面上的所有其他链接或可点击元素的URL现在都会更改，这会使其滚动回到页面顶部。

例如，当我尝试单击滑块的下一个/上一个按钮时，它会滚动回到页面顶部，就好像我点击了Home。

有人可以看到动画代码有什么问题吗？

$(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，但是如果你有一台服务器似乎只能工作，我不这样做）

// * EDIT * // 我发现并不是所有的链接都会让它滚动到页面的顶部，只是我的轨道滑块的按钮和顶部栏折叠时的菜单按钮

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

Answer 1

如果您只想更改hash，具体取决于scrollPosition，那么您就在那里。

您需要将一些逻辑绑定到scroll事件。在hash上更改scroll的{{3}}。

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

我们将新hash设置为最后id元素的.page，其低于<{strong> offset().top而不是$( document ).scrollTop()是的。

（我也是Here is a fork of your Fiddle这个功能，所以在滚动时它不会持续闪光 - 你当然可以删除那个部分）

但是，您应该考虑通过更改hash，您将跳转到等效元素。 debounced关于如何抑制这种行为。

修改

以下是Here is a guide，其中我实施了上述解决方案，以便在scroll更改时禁止强制hash。

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

1 个答案: