javascript - 使后退按钮将页面滚动到页面顶部

Question

我想我遇到了一个典型的 Bootstrap 后退按钮问题，我真的尝试在互联网上四处寻找解决方案，但没有找到。我正在使用 bootstrap nav pills。我有大约 8 颗药丸，当我点击其中任何一颗时，页面会滚动到该特定部分，并且 URL 会更改为 xyz.com/abc#sectionx当我按下后退按钮时，URL 会更改为 xyz.com/abc，但页面不会滚动回顶部。

---****------

编辑:我想我没说清楚。URL 发生变化，但页面仍保留在同一部分 xyz.com/abc#sectionx因此，如果用户不查看 URL，那么他们会认为按下后退按钮没有效果。

---****------

所以我尝试使用这个:

$('html,body').on('hashchange', function () {
    $('body').scrollTop(0);
});

但这没有用，所以我尝试用不同的方式定义 Top 的值:

$('html,body').on('hashchange', function () {
    var top = $(window.location.hash).offset().top;
    $('body').scrollTop('top');
});

但是那没有用，所以我尝试了:

$('html,body').on('hashchange', function () {
 if (window.scrollY>0) {
 window.scrollTo(0,window.scrollY-20)
 setTimeout("gototop()",10)
 }
});

我也试过用 window 替换 html, body 但这也不起作用。我真的很困惑该做什么以及如何让后退按钮将我带到页面顶部。问题是后退按钮正在更改 URL，这很好，但它也需要滚动到顶部。关于如何实现这一目标的任何指导都将非常有值(value)。我非常感谢 jQuery 或纯 javascript 方面的指导。

Answer 1

如果您正在寻找一种滚动到顶部的方法。考虑使用 float 按钮或分隔每个部分的链接。如上所述，通常用户希望后退按钮执行预期的操作。

您可以像这样使用自己的 anchor 轻松创建链接。

<h2 id="top">Top of Page</h2>

// block of content

<a href="#top">Go to top</a>

// block of content

<a href="#top">Go to top</a>

.....