带有可滚动 div 的浏览器历史记录

【问题标题】：Browser history back with scrollable div带有可滚动 div 的浏览器历史记录
【发布时间】：2010-03-17 07:33:57
【问题描述】：

当我跳转到第 1 和第 2 部分时，一切正常，我测试的浏览器（IE8、FF3.6、Chrome 5.0.342.3）向下滚动到 div 中的相应锚点。但是当我按下浏览器历史记录返回按钮时，div 不会向上滚动。

有什么方法可以在不使用 javascript 的情况下完成这项工作吗？

<div id="scrolldiv" style="overflow:auto; width:500px; height:500px; border:2px solid #e1e1e1; "> 
<a href="#link1">Jump to section 1</a> <br />
<a href="#link2">Jump to section 2</a> <br />

<h1 id="link1" name="link1">Section 1</h1> 
<p>lots of text<br />lots of text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> 

<h1 id="link2" name="link2">Section 2</h1> 
<p>lots of text<br />lots of text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

【问题讨论】：

标签： html scroll anchor browser-history fragment-identifier

【解决方案1】：

您可以尝试链接到页面顶部有锚点的/pagename.htm#topofpage。任何人在没有点击您提供到该页面的链接的情况下进入您的页面的人都不会获得效果，但我认为（未经测试）访问/pagename.htm#topofpage 的任何人都应该在他们的浏览器历史记录中添加位置敏感的内容。

此外，使用 非常少 javascript，您应该能够使页面在首次加载时转到该哈希值，这将使访问/pagename.htm 的任何人都可以访问/pagename.htm#topofpage。只需插入：

<script type="text/javascript" language="javascript">
  location.hash = "#topofpage";
</script>

理论是，当有人第一次访问脚本运行的页面时，将它们放在#topofpage，然后除非它们刷新，否则它不会运行。

【讨论】：