具有 Hashchange URL 的锚标记破坏页面答案

【问题标题】：Anchor Tags Breaking Page That Has Hashchange URL具有 Hashchange URL 的锚标记破坏页面
【发布时间】：2017-02-07 21:09:05
【问题描述】：

我正在使用 hashchange 浏览显示/隐藏内容的网站。问题是，我还想使用锚标记进行页面跳转。这会破坏站点并显示初始内容。我似乎找不到解决方法。

有没有一种方法可以在不使用<a href="#anchor">Link to Anchor</a> 的情况下构建一个将您带到锚标记的函数？

【问题讨论】：

标签： jquery html css anchor hashchange

【解决方案1】：

您可以使用滚动补丁：

$(".scroll-link").click(function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  $("body,html").animate({scrollTop: $(url).scrollTop()});
})

只需将.scroll-link 添加到您要滚动的链接中，而不是使用 hashchange。此外，它还可以为滚动设置动画。

【讨论】：

这太棒了，我可能会在某个时候将它用于其他用途，但我应该更详细地解释一下。该网站在技术上是一页，但 div 被隐藏/显示。初始页面状态上的链接是隐藏部分中最近文章的 4 个链接。因此，当单击第 1 条的链接时，我希望隐藏部分显示在第 1 条所在的位置。我最终创建了另一个 hashchange 状态并使用scrollIntoView(); 跳转到文章。在这种情况下，我实际上不希望它动画。
实际上，如果你要使用这个，你必须添加e.preventDefault()来阻止链接通过。