我有一个带有两个选项卡的页面,我想用Javascript来切换它们,并且在URL中设置锚点(例如page.html#tab1
)以便进行书签标记/链接。
默认情况下,选项卡内容位于两个
启用JS后,应用CSS类使它们作为选项卡工作。每个选项卡链接到每个锚点,但是当您单击以切换选项卡时,页面会滚动到选项卡。如果我从onclick函数中返回false,则URL不会更改以包括锚点。
如何使浏览器URL更改为page.html#tab1
,但不要滚动到#tab1
??
我有一个带有两个选项卡的页面,我想用Javascript来切换它们,并且在URL中设置锚点(例如page.html#tab1
)以便进行书签标记/链接。
默认情况下,选项卡内容位于两个
启用JS后,应用CSS类使它们作为选项卡工作。每个选项卡链接到每个锚点,但是当您单击以切换选项卡时,页面会滚动到选项卡。如果我从onclick函数中返回false,则URL不会更改以包括锚点。
如何使浏览器URL更改为page.html#tab1
,但不要滚动到#tab1
??
我已经尝试了一段时间,因为我最初不相信你(我使用jQuery历史记录插件来获得类似的行为)。
但是我陷入了困境。我认为你做不到。作为一种解决方法,您可以使用JavaScript将哈希设置为与实际页面不同的内容。然后在加载时使用JavaScript读取哈希并填充正确的内容。我在我的网站上这样做。因此,在这种情况下,没有JavaScript的用户将被滚动,有JavaScript的用户将保留历史记录链,只有当没有人将链接发送给有人(或反之亦然)时才会变得混乱。
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元素。
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);
你能写一些Javascript代码来更改锚点名称,设置window.location.hash,然后再将锚点名称更改回来吗?
(我已经确认andynormancx是正确的,设置window.location.hash会滚动视图,但我懒得测试在DOM中创建一个锚点是否也会滚动。)
我在这里找到了一个不错的解决方案: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)
});
window.location.hash = 'tab1';
可能有效。