html - 防止锚点将页面推到底部 (HTML)

Question

我有一个带有 style="overflow: auto" 的 div，里面有一些文字。该文本有一些锚点，我在 div 左侧有链接（不在 div 内），每次单击转到锚点时，页面都会移到底部，就像锚点在页面底部一样。

有什么办法可以防止这种情况发生吗？

<a href='#id2'>Link</a>
<div style='width: 100px; overflow: auto;'>
Text Inside, Big text with <hr id='#id10' /> here
Text Inside, Big text with <hr id='#id5' /> here
Text Inside, Big text with <hr id='#id6' /> here
Text Inside, Big text with <hr id='#id27' /> here
Text Inside, Big text with <hr id='#id24' /> here
Text Inside, Big text with <hr id='#id20' /> here
Text Inside, Big text with <hr id='#id21' /> here
Text Inside, Big text with <hr id='#id23' /> here
Text Inside, Big text with <hr id='#id22' /> here
Text Inside, Big text with <hr id='#id2' /> here
<div>

编辑：我既不使用 Javascript 也不使用 Iframe

编辑：在 Firefox 3 中测试

Answer 1

在我看来，正在发生的所有事情都是浏览器试图将您的锚点带到页面顶部，这是这种情况下的正常行为。所以它不是滚动到底部，而是试图让你的链接到页面顶部，而是在它到达之前点击滚动条的底部。

不过，一些示例代码会有所帮助。

Answer 2

每页只能有一个id（id2、id3、id4 等）。id2 列出了 10 次，这很可能导致链接中断。此外，您不能id以井号开头 s；有效 ID 以 ([A-Za-z]) 开头。

Answer 3

这是浏览器的原生功能。如果您想在不使用 javascript 的情况下破坏它，那么您不妨用水枪冲向地狱，因为您不会非常成功。

使用像 jQuery 这样的简单框架可能只需几行代码就可以解决这个问题。您可以将元素滚动到视图中，并阻止默认活动或锚点。