利用Web应用程序的后退和前进浏览器按钮

Question

如何使用后退和前进浏览器按钮导航我的javascript / jQuery Web应用程序？我知道我可以做window.location.href = 'this_url#placeholder'然后执行适当的操作。但是当我这样做时，浏览器会滚动到具有该占位符ID的元素（如果没有，则滚动到顶部）。如何让浏览器不在任何地方滚动？我在facebook这样的其他网站上看过这个，这个适当的机制是什么？

Answer 1

如果您使用location.hash而非location.href，则不应发生您指定的行为。

HTML5标准指定了新的历史记录功能，例如history.pushState()提供了一个很好的替代品，但并非所有浏览器都支持它。

如果您不想推出自己的框架，那么有许多提供此功能的javascript插件都可以很好地打包，以便在不同实现的浏览器中轻松使用。例如，jquery history将在支持它的浏览器上使用较新的history选项，并在不支持它的浏览器中回退到哈希网址。

Answer 2

我认为这可能会回答你的问题：

add a hash with javascript to url without scrolling page?

Answer 3

只使用页面中未实际定义的占位符。如果你有

<a name="contents">

然后使用

<a href="#contentsarea">Contents</a>

激活内容部分。如果主题标签在页面中有锚点，则浏览器仅滚动。

Answer 4

您可以在此之后添加return false或event.preventDefault。

$("a#some_id").click(function(){
  // do something cool
  return false; // don't scroll to #some_id
});

有关相关讨论，请参阅this thread。