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

【问题标题】：When a class is clicked, smoothly scroll to div after page loads单击类时，页面加载后平滑滚动到 div
【发布时间】：2017-08-16 13:14:36
【问题描述】：

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

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

问题是当点击类时，平滑滚动在新页面加载之前就开始了。代码应该怎么写，当点击类时，加载新页面，然后平滑滚动到div？

【问题讨论】：

内容是通过 AJAX 加载的，还是请求一个全新的页面？
全新页面。
您不能在页面 A 上运行 javascript 来为页面 B 上的内容设置动画
明白！谢谢，@Martijn。

标签： jquery

【解决方案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>

这个 sn-p 将在您加载页面时运行（例如，当您到达页面 B 时）然后检查哈希是否设置为特定文本。如果是这样，请在滚动前等待 250 毫秒，以便页面可以先加载一点。

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

【讨论】：

感谢@Martijn 的回复！如果我删除“$（'a.link'）.on（“click”，function（）{“，下一页将平滑滚动。但是，我希望它在单击“a.link”类时这样做另一个。
请用虚拟步骤解释。您在页面 A，单击一个链接，然后？
当然，事情！当在A页面点击类时，页面B加载，然后在B页面执行平滑滚动到div。
太棒了。这就是我的例子所做的。放下你的点击，添加并让我的 sn-p 工作，它应该做你想做的事
我不能使用哈希。抱歉，我应该从一开始就提到这一点。

【解决方案2】：

在链接上放一个哈希：

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

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

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

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

【讨论】：