防止锚在页面加载时跳转

Question

我目前在我的 wordpress 页面上使用“平滑滚动”，并且我试图让页面从我想要的外部链接（使用锚点（#portfolio）从那里平滑滚动到请求的部分从顶部开始的页面，然后滚动到投资组合部分。

发生的情况是它会短暂显示“投资组合部分”（锚点跳转），然后重置到顶部并向下滚动。

代码

$(function() {
    $('.menu li a').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) {
        $root.animate({
        scrollTop: target.offset().top - 75
        }, 800, 'swing');
            return false;  
            }
        }
    });
});

页面加载

$(window).on("load", function() {
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];
if (urlHash && $('#' + urlHash).length)
    $('html,body').animate({
    scrollTop: $('#' + urlHash).offset().top - 75
    }, 800, 'swing');
});

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

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

<a href="link.com/#portfolio>portfolio</a>

HTML - div

<div id="portfolio></div>

Answer 1

您可以通过更改锚点来规避浏览器行为，以便它携带一些页面访问独有的附加文本。在下面的示例中，我已将前六行添加到您的函数中以设置 AnchorSeed 变量，然后在您分配 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。在这种情况下，我们知道“portfolio”就是这样一个链接，因此将其修改为：

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

这样做的效果是 id 将从“portfolio”更改为“portfolio1382124849780”之类的内容（当然，这取决于页面加载时的时间戳）。

因为页面完成加载后 id “portfolio”将不存在（即使它是源 HTML 的一部分），所以浏览器不应反弹到它。

我完全使用 JavaScript，因为我不知道您是否可以访问服务器变量。如果你这样做，我认为它们可能是一个更可取的解决方案，因为代码将更具可读性。如果可能，您可以使用页面计数器变量，或者只是服务器端时间戳。

编辑：

在您提到的 cmets 中，这适用于外部链接，但它破坏了内部链接。我现在没有时间设置测试，但我认为添加一个 jQuery 例程来更新类似于上面所做的那些内部链接是可行的。例如，您的内部链接是：

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

你可以给它一个不同的类来表明它需要更新：

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

然后使用 jQuery 触发对该类的类似修改：

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

（由于我目前无法从工作代码中复制，我可能在上面犯了标点错误或类似的错误——但它不应该花太多的修补才能让它正常工作。