Html 锚定<；a>；使用chrome时，标签不起作用#_Html_Google Chrome_Cross Browser

Html 锚定<；a>；使用chrome时，标签不起作用#

html google-chrome

Html 锚定<；a>；使用chrome时，标签不起作用#,html,google-chrome,cross-browser,Html,Google Chrome,Cross Browser,这是我在页面上使用的代码 <li><a href="/explore/#Sound">Sound</a></li> （在所有页面上显示的菜单中）（在我要链接到的页面上）我尝试过用id向标签添加内容。但只有在chrome浏览器中，才会向下滚动到标签。这些锚在IE&FF中工作有什么想法吗？ <html> <body> <li> <a href="#Sound">

这是我在页面上使用的代码

<li><a href="/explore/#Sound">Sound</a></li>

（在所有页面上显示的菜单中）

（在我要链接到的页面上）

我尝试过用id向标签添加内容。但只有在chrome浏览器中，才会向下滚动到标签。这些锚在IE&FF中工作有什么想法吗？


 <html>
   <body>
    <li>
      <a href="#Sound">Sound</a>
    </li>
    <a id="Sound" href="www.google.com">I AM CALLED</a>
   </body>
</html>

将此代码用作您的代码它将调用带有id值的锚定标记声音

结果表明，这是chrome某些版本中的一个错误，为需要它的任何人发布了解决方案！：）

发布的解决方案对我不起作用，但是经过几天的搜索，它终于发挥了巨大的作用，所以我觉得值得分享：

 $(function() {
       $('a[href*="#"]:not([href="#"])').click(function() {
         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
           var target = $(this.hash);
           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html, body').animate({
               scrollTop: target.offset().top
             }, 1000);
             return false;
           }
         }
       });
     });

只需将链接上的呼叫更改为外部

<a href="#nlink" class="external">  </a>

这是我的版本@Jake\uuu-answer for Chrome/angular，在使用ui-router加载初始页面时，没有滚动到正确的定位点（最初的答案会将我的代码放入“Transition superseed”异常中）：

我不确定这是否有帮助，但我意识到我在IE中的锚在工作，但在Firefox或Chrome中没有。我最后在我的锚中添加了##，这就解决了问题

例如： a href=“##政策”>目的和政策声明

而不是：

a href=“#policy”>目的和政策声明

我也遇到了这个问题（使用链接进行同一页面导航），解决方案非常简单（尽管很难解决）。我希望这能有所帮助——我也检查了IE、Firefox和Chrome，它在所有方面都起到了作用（截至2019年5月22日）

您的链接应如下所示：

<a href="pagename.html##anchorname">Word as link you want people to click</a>

<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>

你的锚应该是这样的：

<a href="pagename.html##anchorname">Word as link you want people to click</a>

<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>

单击链接后，您希望显示在页面顶部的点尝试使用：用于菜单页

<li><a href="/explore/##Sound">Sound</a></li>

在所有页面上显示的菜单中

<a id="#Sound"><a>

这在所有版本的Chrome中都能很好地工作

我已经在我的浏览器上对它进行了测试。

如果你在发现SPA站点的锚链接在外部站点上不起作用时像我一样出现在这里。是的，浏览器运行得太快，无法加载页面的框架。它在加载页面时找不到你的锚

要解决这个问题，只需在SPA的生命周期中添加一些行（React中的

useffect

和Vue中的

mounted

）来检查url哈希并自己进行滚动

使用React的示例

  useEffect(()=> {
    if(document.location.hash === '#some-anchor') {
      setTimeout(()=> {
          document
            .querySelector("#some-anchor")
            .scrollIntoView({ behavior: "smooth", block: "start" })
      }, 300)
    }
  }, [])

你有这个页面的链接吗？它需要认证。你能做一个JSFiddle吗？哦，当然我不好，是的，我会的，尽管它在JSFiddle中不能正常工作，因为问题是当我从另一个页面转到这个页面时，如果我已经在这个页面上，谢谢，伙计，很好地找到了解决方案。终于到了！没问题！通常情况下，一个消除的过程会让你达到目的！谢谢@Jake_uu让我们知道这样一个错误<代码>：）在谷歌标签管理器中也能很好地工作。我只是尝试了一下，但根本无法解决问题。在Wordpress中，由于没有冲突，您不能使用$，但jQueryThis是我已经拥有的，但由于chrome中的一个bug而无法工作，特别是，谢谢：）我尝试了这一点，当单击锚时，锚不再起任何作用。接受的答案对我不起作用，但这个答案确实起了作用。谢谢。这应该是公认的答案。同时也修复了Safari iOSX和Mac OSXmy God上的相同问题，我花了一整天寻找解决方案，谢谢！！

  useEffect(()=> {
    if(document.location.hash === '#some-anchor') {
      setTimeout(()=> {
          document
            .querySelector("#some-anchor")
            .scrollIntoView({ behavior: "smooth", block: "start" })
      }, 300)
    }
  }, [])