jquery - 使用 jQuery/JavaScript 在 href 之后滚动到

Question

我正在构建一个 html 网页，目前的主要问题是我不知道如何在单击新链接后滚动到页面的一部分。我所做的是使用 scrollTop jQuery 方法:

$("#klienti2").click(function(){
    $('.parallax').animate({ scrollTop: windowHeight }, 'slow');
});

它从屏幕顶部滚动了 windowHeight 的量。我选择这种方法而不是使用带有 id 的导航，因为在我需要滚动的地方没有内容。

所以我现在要找的是从不同的页面重定向到这个页面后做同样的事情。我试过的是:

$("#audio2").click(function(){
    window.location.href = "prew2.html";
    $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow');
});

但现在它只是在不滚动的情况下重定向到该页面。任何想法为什么？我认为，根据代码，它应该 href 到该位置，然后动画到指定位置，但它似乎忽略了动画。

Answer 1

来自评论:HTML 是无状态的。更改 href 后，随着代码被卸载，后面的任何内容都将被忽略。您需要将某些内容传递到接收页面(例如 prew2.html 上的查询字符串参数)并从 prew2.html 内部对此作出 react .

接收页面需要知道是否滚动到预期位置。是否滚动的决定由调用者做出。

显而易见的方法是在查询字符串中传递一个参数。由于这段代码就像书签 URL 一样，您也可以为任务使用书签 URL 并检查特定的书签值:

在您的第一页中，链接代码类似于:

$("#audio2").click(function(){
    window.location.href = "prew2.html#doitnow";
});

当然，如果那只是一个普通的 anchor ，这也会做同样的事情:

<a id="audio2" href="prew2.html#doitnow">Click me</a>

接收页面的代码是这样的:

$(function(){   // Shortcut for DOM ready handler
    if (location.href.indexOf("#doitnow") >=0 ){
        $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow');
    }
});