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 - divs

<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。在这种情况下，我们知道“投资组合”就是这样一个环节，所以它将被修改为：

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

这样做的结果是id会从“portfolio”更改为“portfolio1382124849780”（当然，取决于加载页面时的时间戳）。

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

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

修改

在您提到的评论中，这适用于外部链接，但它破坏了内部链接。我现在没有时间设置测试，但我认为添加一个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 ); } );

（由于我目前无法从工作代码中复制，我可能会在上面发出标点符号错误 - 但是不应该花太多时间来修补它以使其正常工作。< / p>

防止锚点在页面加载时跳跃

代码

页面加载

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

HTML - divs

1 个答案: