单击类时，在页面加载后平滑滚动到 div

Question

我修改了这段代码，以便在单击某个特定类时平滑地滚动到页面上的特定div。

jQuery(function($) {
$('a.link').on( "click", function() {
$('html, body').animate({scrollTop : $(".text").offset().top}, 1000);
});
});

问题是，当单击该类时，平滑滚动会在新页面加载之前开始。应该如何编写代码，以便在单击类时加载新页面，然后执行平滑滚动到div？

Answer 1

你不能在 A 页上运行 javascript 来对 B 页上的某些内容进行动画处理。

我最近创建了一段类似的代码。我创建了一个特定的前置到has(#goto_(来记住我想在新页面上的位置，并让Javascript听它。

$(document).ready(function(){
if( window.location.hash==="#goto_text" ){
setTimeout(function(){
$('html,body').animate({ scrollTop: document.getElementById('idTargetElement').offsetTop }, 1000);
},250);
}
});
<a href="/targetpage#goto_text">example anchor</a>

当您加载页面(例如，当您到达页面 B 时(并检查哈希是否设置为特定文本时，此代码段将运行。如果是这样，请在滚动前等待 250 毫秒，以便页面可以先加载一点。

我可能会有一些看起来更容易的选项，但你会发现这在各种设置中更容易控制。例如，您可以将超时更改为window.load()，或更改其他时间。

Answer 2

在链接上放置一个哈希：

<a href="otherpage.html#elementID">Jump</a>

在其他页面上，您可以执行以下操作：

$('html,body').animate({
scrollTop: $(window.location.hash).offset().top
}, 1000);

在其他页面上，您应该将 id 设置为要滚动到的元素 ID。当然，您可以更改它的名称。