使用jQuery / JavaScript在a href之后滚动到指定位置

Question

我是在建设一个HTML网页，目前的主要问题是我不知道如何在点击新链接后滚动到某个页面部分。我的解决方法是使用scrollTop jQuery方法：

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

它从屏幕顶部滚动了窗口高度的量。我选择这种方法而不是使用ID导航，因为我需要滚动的位置没有内容。

现在我想要做的是在从不同页面重定向到此页面后执行相同的操作。我尝试过：

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

但现在它只是重定向到该页面而不滚动。有什么想法吗？我以为根据代码，它应该href到位置，然后动画到指定位置，但它似乎忽略了动画效果。

- Oskars

---

HTML是无状态的。一旦您更改了href，其后跟的任何内容都会被忽略，因为代码已卸载。您需要将某些内容传递到接收页面（例如，在prew2.html上使用查询字符串参数），然后从prew2.html内部对其进行响应。 - iCollect.it Ltd

使用 URL 参数，然后在 jQuery 中处理它。 - Gustaf Gunér

重定向页面将停止任何当前运行的Javascript。 - LcSalazar

我同意@TrueBlueAussie的观点，页面的URL需要有一些内容来指示它是否需要滚动到HTML元素的位置。 - Nikhil Chavan

抱歉打错字了。下面的 indexOf 是大写的 O :) - iCollect.it Ltd

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

- Gone Coding

---

谢谢，是的，我现在可以使用链接标签而不是JavaScript了。但是在Moz FF中，我遇到了一个错误：““location.href.indexof不是一个函数”” 我按照您的建议做了：创建了一个href到“prew2.html#doitnow”，并在我的JS文件中的文档准备好的函数中编写了以下代码：if (location.href.indexof("#doitnow") >=0 ){ $('.parallax').animate({ scrollTop: windowHeight*2.6 }, 'slow'); } - Oskars

@Oskars：笔误：indexOf中的字母是大写的 O。 - iCollect.it Ltd

它的效果很好，但是我开始担心那个“>=0”的部分。它是否会在随机情况下产生错误？比如加载页面时自动滚动到那个部分，而不是用户所要求的吗？ - Oskars

>= 0 只是表示字符串是否存在。它是一个布尔开关，因此如果查询字符串参数不完全匹配，您将不会遇到随机错误。 - iCollect.it Ltd

Answer 2

您的脚本告诉浏览器在点击时打开一个新的URL

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

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

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

这段代码永远不会被执行。

- AbeCodes

---

你觉得这是一个解决方案吗？不是的。 - Gustaf Gunér

这并没有回答问题。 - user1752532

确实，它回答了问题“为什么？” - LcSalazar

你问为什么它不起作用，这就是原因。要解决问题，请关注@TrueBlueAussie并传递一个参数，并使用正则表达式或类似方法进行检查。 - AbeCodes

@LcSalazar：这怎么解决所述的问题？这只回答了问题中最基本的部分，没有解决实际所述的问题。它肯定不值得 5个赞（更像是一条评论） :) - iCollect.it Ltd

@TrueBlueAussie - 我同意这不是一个解决方案，也不应该被点赞... 我只是反驳了“这并没有回答问题”的说法，因为它实际上确实回答了问题，因为问题并没有要求解决方案... 它更像是对问题的批评而不是对答案的补充。（顺便说一下，我没有给它点赞） - LcSalazar

Answer 3

将其放置在原始点击语句之外，并放置在正在导航到的页面上。

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

一个简单的if语句将会检查并在你到达该URL时应用更改。

- user1752532

---

你使用了赋值而不是比较！ - iCollect.it Ltd

真棒 @TrueBlueAussie - user1752532

另外，需要提醒的是，此语句应放置在“click”事件处理程序之外。 - LcSalazar

另外，您还需要解释这段代码必须放在两个页面中才能起作用 :) - iCollect.it Ltd

当然，如果URL是您唯一检查的内容，那么此代码就毫无意义（它只会在页面“prev2.html”中始终动画滚动）！您需要根据另一页的决策有条件地滚动到该点...谁点赞了这个？ :P - iCollect.it Ltd