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

Javascript - focus/jump on anchor link to behave the same in all browsers (plus maybe add hash # to link)

本文关键字：链接 添加 哈希 浏览器 焦点 Javascript      更新时间：2023-09-26

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

最好在点击按钮后，用户总是被带到确切的锚链接位置(即。从示例中，它将是:…/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)。

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

这个版本接受一个ID，聚焦元素，然后通过设置window.location.hash:

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

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

相关文章：