Javascript 防止锚在页面加载时跳转

我目前正在wordpress页面上使用“平滑滚动”，当从外部链接（使用锚（

#portfolio

）到达请求的部分时，我尝试让页面平滑滚动到请求的部分。我希望页面从顶部开始，然后滚动到portfolio部分

所发生的是，它会短暂地显示“公文包部分”（锚跳转），然后重置到顶部并向下滚动

代码 页面加载 如何防止页面加载时出现的“跳跃”

HTML-导航链接（使用虚拟链接）

HTML-divs

---

您可以通过更改锚定来规避浏览器行为，使其携带一些页面访问所特有的额外文本。在下面的示例中，我在函数中添加了前六行以设置锚定种子变量，然后在分配urlHash变量时使用了该变量：

$(window).on("load", function() {
    var AnchorSeed = new Date() * 1;
    $( ".AnchorUpdate" ).each(
        function() {
            $( this ).attr( "id", this.id + AnchorSeed );
        }
    );
    if (location.hash) { // do the test straight away
        window.scrollTo(0, 0); // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0); // run it a bit later also for browser compatibility
        }, 1);
    }
    var urlHash = window.location.href.split("#")[1] + AnchorSeed;
    if (urlHash && $('#' + urlHash).length)
        $('html,body').animate({
        scrollTop: $('#' + urlHash).offset().top - 75
        }, 800, 'swing');
});

您需要将AnchorUpdate类添加到您可能跳转到的任何页面元素中，以便jQuery例程可以找到它并用AnchorSeed值更新其id。在这种情况下，我们知道“公文包”就是这样一个链接，因此它将被修改为：

<div class="AnchorUpdate" id="portfolio></div>

（由于我目前无法从工作代码中复制，我可能在上面犯了标点符号错误之类的错误——但要使其正常工作不需要太多的修补。
设置的超时使其在其他代码触发后跳转到顶部……问题是
link.com/#portfolio
对浏览器有意义--在此位置打开。您无法更改浏览器，因此它将在此位置启动，然后运行您的jovascript。嗨，Hogan，我以前见过这样做。显然，这不是使用我正在使用的方法完成的，是否存在其他问题？我的Google整个上午都在让我失望。是否有一些我遗漏的工作类型？感谢您的回复请回答我的问题。如果这是我能做的最好的，那么请让我知道。我只是想确保没有其他选择。根据位置跳转到元素。页面加载时散列是默认的浏览器行为，我不认为你可以做任何事来覆盖它。嗨，Joe，谢谢你的回答。我会尝试一下，然后重试ort back！嗨，Joe，它似乎不起作用。事实上，它从另一个页面发出时会破坏滚动功能。但它在主页上仍然有效。我知道你在尝试做什么，不过我会修改它，看看是否能正常工作。谢谢你的帮助！这很奇怪。你不会说你在测试哪个浏览器--但它在Chrome和Firefox中对我有效（由于与脚本无关的原因，我无法测试Internet Explorer，而且我没有安装Safari）嗨，乔，我使用的是最新版本的Chrome。你是说当你测试它时，它不会跳转，加载页面后它会滚动到所选的部分？如果是这样的话，那可能是我的错误。是的，这是我的经验。但我不知道为什么我们的Chrome版本会表现不同。
<a href="link.com/#portfolio>portfolio</a>

<div id="portfolio></div>

$(window).on("load", function() {
    var AnchorSeed = new Date() * 1;
    $( ".AnchorUpdate" ).each(
        function() {
            $( this ).attr( "id", this.id + AnchorSeed );
        }
    );
    if (location.hash) { // do the test straight away
        window.scrollTo(0, 0); // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0); // run it a bit later also for browser compatibility
        }, 1);
    }
    var urlHash = window.location.href.split("#")[1] + AnchorSeed;
    if (urlHash && $('#' + urlHash).length)
        $('html,body').animate({
        scrollTop: $('#' + urlHash).offset().top - 75
        }, 800, 'swing');
});

<div class="AnchorUpdate" id="portfolio></div>

<a href="#InternalLink">Jump to Internal Link</a>

<a class="InternalLinkUpdate" href="#InternalLink">Jump to Internal Link</a>

$( ".InternalLinkUpdate" ).each(
    function() {
        $( this ).attr( "href", $( this ).attr( "href" ) + AnchorSeed );
    }
);