激活URL锚点但不要滚动到它？

Question

我有一个带有两个选项卡的页面，我想用Javascript来切换它们，并且在URL中设置锚点（例如page.html#tab1）以便进行书签标记/链接。

默认情况下，选项卡内容位于两个

中，一个在另一个下面，当JS禁用时，锚点标记将滚动到正确的位置。

启用JS后，应用CSS类使它们作为选项卡工作。每个选项卡链接到每个锚点，但是当您单击以切换选项卡时，页面会滚动到选项卡。如果我从onclick函数中返回false，则URL不会更改以包括锚点。

如何使浏览器URL更改为page.html#tab1，但不要滚动到#tab1？？

- DisgruntledGoat

Answer 1

我已经尝试了一段时间，因为我最初不相信你（我使用jQuery历史记录插件来获得类似的行为）。

但是我陷入了困境。我认为你做不到。作为一种解决方法，您可以使用JavaScript将哈希设置为与实际页面不同的内容。然后在加载时使用JavaScript读取哈希并填充正确的内容。我在我的网站上这样做。因此，在这种情况下，没有JavaScript的用户将被滚动，有JavaScript的用户将保留历史记录链，只有当没有人将链接发送给有人（或反之亦然）时才会变得混乱。

- Tom Ritter

---

这个代码可行，我刚刚发现这就是validator.w3.org的作用。最终，我决定放弃让锚点在非JS浏览器中跳转到正确位置，因为这两个div不是很高，而且正如你所说，来自启用JS的用户的链接对于未启用JS的用户会导致其无法工作。 - DisgruntledGoat

Answer 2

一个快速的技巧：

var thehash = e.target.hash;
$(thehash).prop('id',thehash.substr(1)+'-noscroll');
window.location.hash = e.target.hash;
$(thehash+'-noscroll').prop('id',thehash.substr(1));     

这会在更改URL哈希之前和之后更改HTML元素的ID。对我来说有效，但也可能会破坏某些东西。这可以防止浏览器在哈希更改时滚动，因为中间没有具有该ID的HTML元素。

- devsnd

---

这对我起作用了（只是半心半意地期望它能够起作用）。虽然具有一定的黑客风格，但到目前为止还没有发现任何问题。 - Joshua Stewardson

Answer 3

var Namespace = {
  var timer, scroll;
}

// Onclick
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100);
location.hash = this.href;
clearInterval(Namespace.timer);

- Josh Stodola

Answer 4

你能写一些Javascript代码来更改锚点名称，设置window.location.hash，然后再将锚点名称更改回来吗？

（我已经确认andynormancx是正确的，设置window.location.hash会滚动视图，但我懒得测试在DOM中创建一个锚点是否也会滚动。）

- Alec

Answer 5

我在这里找到了一个不错的解决方案：http://lea.verou.me/2011/05/change-url-hash-without-page-jump/

例如，在点击事件上使用preventDefault

$('a').click((event) => {
    event.preventDefault();
    let hash = $(event.target).attr('href');
    history.pushState(null, null, hash);
    // The url now has a hash but the page won't jump to the given anchor
    // .. handle the rest (an easing scroll for example)
});

- Arno van Oordt

Answer 6

window.location.hash = 'tab1';

可能有效。

- Jani Hartikainen

---

不会的，那会滚动到锚点（除了在某些情况下的Safari中，由于其破损的location.hash支持）。 - andynormancx