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 内部对做出反应。

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

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

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

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

当然，如果这只是一个普通的锚点，那么也会这样做：

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

Answer 2

您的脚本会告诉浏览器点击

打开新的网址

window.location.href = "prew2.html";

现在，浏览器导航到此地址，停止所有实际脚本并构建新DOM。

$('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow');

此代码永远不会到达，永远不会执行。

Answer 3

放置在原始点击语句之外且位于要导航到的页面上。

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

简单的if语句将检查并在您到达该URL时应用更改

使用jQuery / JavaScript进行href后滚动

3 个答案: