javascript - 平滑滚动到哈希时如何停止丢失正确的位置/URL

Question

好的，我有一些问题...我正在使用 bootstrap/jquery 构建我的网站。我正在使用引导导航，所有导航链接都是指向同一页面上不同容器的哈希链接。

问题#1当使用下面的方法“劫持”链接时，我丢失了 URL 地址，因此人们可以获取该链接并稍后共享或链接到该链接。

问题 #2还有一些其他页面的内容不在主页上。很明显，当用户单击链接/somepage/#photography 时不起作用。这里唯一的解决方案是不使用相对链接吗？

<nav>
  <a href="#photography">Photography</a>
</nav>

// smooth scroll from navigation
$('nav a').click(function(evt){
  evt.preventDefault();
  var $section = $($(this).attr('href'));
  scrollToObject($section);
});

Answer 1

问题 1: 丢失 URL 末尾哈希值的原因是对 evt.preventDefault() 的调用阻止添加哈希值。

我不是 100% 确定 scrollToObject() 中滚动效果的内部工作原理，但如果您可以在滚动完成时提供回调函数，则可以添加 location.assign( evt.target.hash ); 会将哈希值添加到 URL (and it will show up in the user's history.) 当然，你可以从 anchor 对象、事件等中获取哈希值

您可以在 MDN 上阅读有关 js 中的位置接口(interface)的信息:https://developer.mozilla.org/en-US/docs/Web/API/Location

问题 2:您实际上可以使用 location.assign() 再次完成此操作。再次，在不查看所有代码的情况下，您可以在回调中创建条件，然后将用户发送回带有滚动 anchor 的页面: location.assign( location.origin + '/' + evt.target .hash).