Question

我有一个页面，其中有两个标签，我希望能够使用Javascript进行切换，还可以在URL中设置锚点（例如page.html#tab1）以进行书签/链接。

默认情况下，标签内容有两个div，一个在另一个下面，锚标签将滚动到正确的标签，并禁用JS。

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

如何将浏览器网址更改为page.html#tab1，但不能滚动到#tab1 ??

Answer 1

我已经玩了一段时间，因为我最初不相信你（我使用jQuery history plugin来获得类似的行为）。

我很难过。我认为你不能。作为解决方法，可以做的是use javascript to set the hash to something DIFFERENT from what is actually on the page。然后在加载时使用javascript来读取哈希并填充正确的内容。 I do this on my site。因此，在这种情况下，没有javascript的用户会被滚动，带有javascript的用户会保留历史记录链，而只有当没有发送链接的人链接到（或反之亦然）时，它才会变得古怪。

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元素。

Answer 3

您是否可以使用一些更改了锚名称的Javascript，设置window.location.hash，然后更改锚名称？

（我已经确认andynormancx是正确的，并且设置window.location.hash会滚动视图，但是我太懒了，无法测试是否在DOM中创建一个锚到window.location.hash也会滚动。）< / p>

Answer 4

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);

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)
}

Answer 6

window.location.hash = 'tab1';

可能有用。

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

6 个答案: