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

发布于 2024-08-25 14:52:58 字数 1007 浏览 5 评论 0原文

当我跳到第 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>

原文

When I Jump to section 1 & 2 everything works fine, and the browsers I tested (IE8, FF3.6, Chrome 5.0.342.3) scrolls down to the respective anchor in the div. But when I press the browser history back button the div won't scroll back up.

Is there some way to make this work without using 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风轻花落早 2024-09-01 14:52:58

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

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

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

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

You could try linking to /pagename.htm#topofpage where there's an anchor at the top of the page. Anyone who got to your page without clicking on the link you provide to that page won't get the effect, but anyone who goes to /pagename.htm#topofpage should, I think (not tested), get position-sensitive additions to their browser history.

Also, with very little javascript you should be able to make the page go to that hash when it's first loaded, which would then enable anyone visiting /pagename.htm to get to /pagename.htm#topofpage. Just insert:

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

The theory is that the first time someone visits the page the script runs, putting them at #topofpage, and that subsequently it won't run unless they refresh.

回复收藏 0 原文

~没有更多了~