javascript - Html anchor 链接和hashbang，简单的解决方案吗？

Question

我在 http://www.g3eo.com/#!/page_About第 96 行如下:

<li><a href="#!/page_Services">Side scan sonar surveys</a></li>

并且需要创建一个 anchor 以转到第 180 行:

<li id="sidescan"><strong>Side scan sonar surveys</strong></li>

我知道要实现此功能，我需要执行以下操作:

<li><a href="#!/page_Services#sss">Side scan sonar surveys</a></li>
<li id="sidescan"><a name="sss"><strong>Side scan sonar surveys</strong></a></li>

但这没有任何作用。我想知道问题是否出在 #!/page_Services 中的 hashbang，没有它，网页将无法正常工作。

Answer 1

这样的事情会起作用:

// Run the code on page load. Change this to whatever your page callback is
window.addEventListener('load', function(e)
{
  // Find any of the anchors that have a hash link.
  // Change document to whatever the container is for your new elements
  as = document.querySelectorAll('a[href^="#"]');
  as.forEach(function(a)
  {
    a.addEventListener('click', function(e)
    {
      // This stops the hash being added to the URL on click
      e.preventDefault();

      // Find the hash and the target element (based on ID)
      var hash = e.target.href.split('#')[1];
      var targetEl = document.getElementById(hash);

      // Scroll the window to the target elements offsetTop
      window.scrollTo(0, targetEl.offsetTop);
    });
  });
});

但是您需要在加载要使用的内容后(而不是在页面加载时)运行此代码。

基本上，这模拟了哈希链接，而不将哈希添加到 URL。请参阅此处了解工作版本 - https://plnkr.co/edit/mubdlfjuFTgLeYq6ZpCR?p=preview