滚动到锚点，同时保持散列

Posted 2023-04-14

【中文标题】滚动到锚点，同时保持散列

【英文标题】：Scroll to anchor whilst keeping the hash

【发布时间】：2013-07-21 13:05:21

【问题描述】：

我有一个导航到各个部分的页面。每个人都为该页面提供了一个锚标记，因此有人可以轻松地重新访问该部分。我想要的是正常机制正常工作，而不是跳转到该部分（根据正常的浏览器行为）我希望它在那里滚动。

我已经实现了滚动效果很好我只是不知道如何将哈希 URL 保留为 e.preventDefault() 阻止这种情况发生。如果我删除此行，则页面会在滚动前闪烁。

$(".navigation a").click(function(e)
    $(".navigation a").removeClass("active");
    $(this).addClass("active");

    if ($(this).attr("href").substring(0,1) == "#")
        e.preventDefault();

         $('html, body').animate(
             scrollTop: $($(this).attr("href")).offset().top
         , 1000);
    
);

【问题讨论】：

看看这个：***.com/questions/6478485/…

这对我有什么帮助？修改document.location.hash 即刻跳转页面不滚动！

试试return false 和preventDefault。有更好的吗？

@Chris 您可以为该事件绑定一个处理程序并且什么都不做，阅读完整答案

如果它返回 false 函数不会动画到顶部

【参考方案1】：

我不知道您对旧浏览器的支持程度如何，否则您可以使用pushState functionallity 该网址提供了有关如何使用它的文档:)

所有浏览器和 IE10 都支持（所以没有 9 或更少）

---

无推送状态的解决方案是滚动到适当的高度，然后更改 url。如果做得好，页面不会跳:)

// you should change class navigation to id navigation, since there probally is only one
$(".navigation".find("a").click(function(e) // with id this will speed up a bit
    //$(".navigation a").removeClass("active");
    $(".navigation a.active").removeClass("active"); // with A its faster
    $(this).addClass("active");
    var anchorDestination = this.href; // save for later, select as little times as possible

    //if ($(this).attr("href").substring(0,1) == "#")
    if ( this.href.substring(0,1) == "#") // use native JS where possible
        e.preventDefault();
        var anchorDestination = this.href; // save for later
        var $aElem = $(this); // select it once, save it for later

        $('html, body').animate(
             //scrollTop: $($(this).attr("href")).offset().top
             scrollTop: $aElem.offset().top
        , 1000, function()
             window.location = anchorDestination;
        );
    
);

【讨论】：

不知道为什么我没有想到这个，谢谢这是一个很好的答案

熟悉的问题是程序世界：P 我们有时想的太大了。另外，请查看我添加的提示:)

为提示干杯，当某些东西没有在 for 循环中使用或者我没有很多元素时，我更喜欢可读性而不是直接效率:)

是的，我明白了。我添加它是为了向人们展示如何使用它:) 这个例子有点太简单了，看不到。 'id 而不是 class' 仍然存在