Question

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

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

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

Answer 1

你不能在第A页上运行javascript来动画第B页上的某些内容。您所在页面上的Javascript已经过了（有一些例外情况，但你的不是一个例外情况。）

我最近创建了一段类似的代码。我为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时），然后检查散列是否设置为特定文本。如果是这样，请在滚动前等待250ms，以便页面可以先加载一点。

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

Answer 2

在链接上放一个哈希：

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

在其他页面上，你可以这样做：

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

在其他页面上，您应该将id设置为elementID的元素滚动到。当然你可以改变它的名字。

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

2 个答案: