不显示URL中的井号，跳转到锚点标签

Question

我目前使用jQuery通过类中的onload函数在特定的hashtag处加载页面，当用户点击文章标题时。这个hashtag显然会出现在URL中。我想知道是否有一种方法可以隐藏hashtag，以免让URL混乱不堪。我搜索了一些内容，但没有找到什么有用的信息。

function goToAnchor() {
    location.href = "#post";
}

- chris_s

Answer 1

正如这里所看到的：http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

只需传递您想要滚动到的元素的 id。

- Jeff Hines

---

我想我忘了提到这是在WordPress中。因此，当我在博客文章页面上单击链接时，我希望它可以滚动到标题处。我尝试使用此代码，并按照链接中的说明进行操作，但无法使其正常工作...有什么建议吗？ - chris_s

你能确保当你点击链接时函数被调用吗？试着在里面加入 alert()。 - Jeff Hines

Answer 2

您可以绑定一个“点击”事件到这种特定的锚点上，并在其上使用preventDefault()方法防止默认事件的触发：

$('.anchorClass').on('click', function(e) {
  e.preventDefault();
  // rest of stuff
});

“其余的东西”是指定位某种插件或代码示例，以跳转页面。如果您希望页面平稳滚动，则有一个非常流行的scrollTo插件。甚至可能是scrollTo插件处理了默认预防措施。

【更新】

Jeff的建议（假设它有效）是“其余的东西”，也是两个答案中更有用的答案。;-) 但是预防默认仍然很重要。

- Greg Pettit

---

我仍然喜欢你所拥有的 :) 我们互相补充。 - Jeff Hines

Answer 3

跳转/平滑滚动到锚点标签，而不在URL中显示井号 点击此处查看演示

function scrollSmoothTo(elementId) {
  var element = document.getElementById(elementId);
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}

#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}

a {
  color: #337ab7;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

<a onclick="scrollSmoothTo('userdiv')">
  Scroll to userdiv
</a>

<div id="userdiv">
  Lorem ipsum this is a random text
</div>

- Manoj Selvin

Answer 4

我认为你可以使用 .htaccess 文件。在那里，你可以让一些 URL 链接指向同一个地址。

例如，fff.com/fff、fff.com 和 fff.com#anchor 可以在浏览器标签中显示为 fff.com。

- VWpolo Crystaline