防止锚点在页面加载时跳转 [英] Preventing anchor from jumping on page load

问题描述

我目前在我的wordpress页面上使用平滑滚动"，并且当我从外部链接(使用锚点(#portfolio))访问时，试图将页面平滑滚动到请求的部分页面从顶部开始，然后滚动到投资组合部分.

I'm currently using 'smooth scroll' on my wordpress page, and I'm attempting to have the page smoothly scroll to the requested section when coming from an external link (using anchors ( #portfolio)from there I want the page to start at the top and THEN scroll to the portfolio section.

发生的事情是它短暂地显示了投资组合部分"(锚跳转)，然后THEN重置到顶部并向下滚动.

What's happening is it briefly displays the 'portfolio section' (anchor jump) and THEN resets to the top and scrolls down.

$(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');
});

如何防止页面加载中似乎发生的跳跃"?

How do I prevent the 'jumping' that seems to happen on page load?

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

HTML-divs

<div id="portfolio></div>

推荐答案

您可以通过更改锚点来规避浏览器的行为，使其包含一些额外的文本，这些文本对于页面访问是唯一的.在下面的示例中，我在函数中添加了前六行以设置AnchorSeed变量，然后在分配urlHash变量的地方使用了该变量:

You can circumvent the browser behavior by changing the anchor so that it carries some additional text that will be unique to the page visit. In the example below, I've added the first six lines to your function to set the AnchorSeed variable, and then I've used that variable where you assign the urlHash variable:

$(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.在这种情况下，我们知道投资组合"就是这样的链接，因此可以将其修改为:

And you'll need to add the AnchorUpdate class to any page element that you might jump to, so that the jQuery routine can find it and update its id with the AnchorSeed value. In this case, we know that "portfolio" is such a link, so it would be modified as:

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

这样的结果是id将从"portfolio"更改为"portfolio1382124849780"(当然，这取决于页面加载时的时间戳).

The effect of this is that the id will change from "portfolio" to something like "portfolio1382124849780" (depending, of course, on the time stamp when the page was loaded).

因为页面完成加载后ID投资组合"将不存在(即使它是源HTML的一部分)，所以浏览器不应该跳回该页面.

Because the id "portfolio" won't exist when the page finishes loading (even though it is part of the source HTML), the browswer shouldn't bounce to it.

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

I used JavaScript entirely because I didn't know if you had access to server variables. If you do, I think they might be a preferable solution, as the code will be more readable. You might use a page counter variable, or simply a server-side timestamp, if possible.

在评论中，您提到此方法适用于外部链接，但它破坏了内部链接.我现在没有时间设置测试，但是我认为添加jQuery例程来更新这些内部链接将是可行的，类似于上面所做的事情.例如，您的内部链接是:

In the comments you mentioned that this was working for external links, but that it broke internal links. I don't have time to set up a test right now, but I think it would work to add a jQuery routine to update those internal links similar to what is being done above. For example, your internal link is:

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

您可以给它一个不同的类，指示它需要更新:

You might give it a different class indicating that it needs updating:

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

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

And then trigger a similar modification of that class using jQuery:

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

(由于我目前无法从工作代码中进行复制，因此我可能在上面犯了标点符号错误或类似的错误-但应该花很多时间才能使其正常工作.

(Since I'm not able to copy from working code at the moment, I might have made a punctuation error or such in the above -- but it shouldn't take too much tinkering to get it to work properly.

这篇关于防止锚点在页面加载时跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！