Html 锚链接和hashbang，简单的解决方案？

Question

我在 http://www.g3eo.com/#!/page_About 第 96 行中有以下内容：

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

并且需要创建一个锚点以转到第 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

Answer 2

我开始研究与@Liam Egan 非常相似的解决方案，这很好，但我认为 "What if someone wants to share a link to an anchor tag? I'll just try using both a hashbang and an anchor hash in the URL!".

经过多次测试，事实证明，它真的很难维护，特别是如果您使用使用散列的外部库。它会坏掉，所以我放弃了这个想法。

这里是链接点击的解决方案，我在你们的网站上测试过：

$(function(){
    $('a[href^="#"]').click(function(e){
        // Get the hashes in link
        var h = this.href.split('#');
        // If the first hash is not a hashbang or if there are several hashes
        if(h[1].indexOf('!') !== 0 || h.length > 2) {
            // Prevent default behavior of the link so it does not break the site
            e.preventDefault();
            // If the first hash is a hashbang (but there are multiple hashes),
            // only include the first one in the page URL
            if(h[1].indexOf('!') === 0) { window.location.hash = '#' + h[1]; }
            // Get the element with the right ID (last hash) and its scrolling container
            var el = $('#' + h.pop()), cont = el.closest('div[class^="scroll"]');
            // Scroll the scrolling container to that element after a delay,
            // because it does not work during the page transition
            setTimeout(function() {
                cont.scrollTop(0) // Reset it first to get the right position below
                    .scrollTop( el.position().top );
            },500);
        }
    });
});

我不得不改编它有两个原因：

不是整个文档都应该滚动，只是你的包装 .scroll div
页面转换期间滚动不起作用，因此需要延迟

它不会影响 #!/page_XXX 等链接，并将与 #myID 或 #!/page_XXX#myID 等链接一起使用。

最后，为了简单起见，既然你用的是jQuery，我也用了。加载后将这段代码放在页面上的任意位置 jQuery，它应该可以工作。

Html 锚链接和hashbang，简单的解决方案？

Html anchor linking and hashbang, simple solution?

html

javascript

anchor

jquery

hashbang