Javascript - 聚焦/跳转 anchor 链接以在所有浏览器中表现相同(加上可能添加哈希#到链接)

Question

我有一个简单的 Javascript 函数，它应该将用户带到/聚焦到页面上的确切哈希链接位置。问题是 - 它在不同的浏览器上表现不同(似乎在 Firefox 中效果最好，在 Chrome/Opera 中效果最差)，而且它实际上并没有将用户带到确切的 anchor 位置。

最好是在单击按钮后，用户始终会被带到确切的 anchor 链接位置(即，从示例来看，它将是:.../UfDLW/16/show/#2)。单击链接后，用户应始终被“带到”页面顶部，即。聚焦链接 #2 应该位于页面的正上方(目前它以某种方式随机放置)。

也许解决方案是“强制”浏览器在单击按钮时将 #2 添加到链接中，但不确定如何执行此操作以及这是否是正确的解决方案。

<button type="button" onclick="focusHash();">FOCUS</button>

<div style="height:500px"><a id="a1" href="#1">#1</a></div>

<div style="height:500px"><a id="a2" href="#2">#2</a></div>

<div style="height:500px"><a id="a3" href="#3">#3</a></div>


function focusHash() {
document.getElementById('a2').focus();
}

这是jfiddle:http://jsfiddle.net/pdXEt/3/

我在这里只能使用纯 Javascript(没有 JQuery)。

Answer 1

focus 不会移动浏览器窗口，除非使元素可见。如果您希望其行为与单击链接相同，则需要修改 URL 以包含要移动到的 anchor 标记的正确哈希片段。

这是一个接受 ID、聚焦元素，然后通过设置 window.location.hash 移动到该元素的版本:

function focusHash(id) {
  document.getElementById(id).focus();
  window.location.hash = id;
}

参见http://jsfiddle.net/pdXEt/9/