使用 # 时锚 <a> 标签在 chrome 中不起作用

Question

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

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

（在出现在所有页面上的菜单中）

<a id="Sound"><a>

（在我要 link 的页面上）

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

Answer 1

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

将其用作您的代码，它将调用 id 值为 sound 的锚标记

Answer 2

原来这是 chrome 某些版本中的错误，为需要它的任何人发布解决方法！ :)

$(document).ready(function () {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        if (window.location.hash && isChrome) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 300);
        }
    });

Answer 3

发布的变通方法对我不起作用，但经过几天的搜索后，它终于发挥了作用，所以我认为它值得分享：

 $(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;
           }
         }
       });
     });

Answer 4

只需将 link 上的呼叫更改为外部呼叫即可。

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

Answer 5

这是我对 Chrome / angular 的@Jake_ 回答的版本，在使用 ui-router 加载初始页面时没有滚动到正确的锚点（原始答案会抛出我的代码进入 'Transition superseeded' 异常）：

angular.module('myapp').run(function($transitions, $state, $document, $timeout) {
  var finishHook = $transitions.onSuccess({}, function() { // Wait for the complete routing path to settle
    $document.ready(function() { // On DOM ready - check whether we have an anchor and Chrome
      var hash;
      var params;
      var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
      finishHook(); // Deregister the hook; the problem happens only on initial load
      if ('#' in $state.params && isChrome) {
        hash = $state.params['#']; // Save the anchor
        params = _.omit($state.params, ['id', '#']);
        $timeout(function() {
          // Transition to the no-anchor state
          $state.go('.', params, { reload: false, notify: false, location: 'replace' });
          $timeout(function() {
            // Transition back to anchor again
            $state.go('.', _.assign($state.params, { '#': hash }), { reload: false, notify: false, location: 'replace' });
          }, 0);
        }, 0);
      }
    });
  }, {invokeLimit: 1});
});

Answer 6

不确定这是否有帮助，但我意识到我的锚点在 IE 中有效，但在 Firefox 或 Chrome 中无效。我最终将 ## 添加到我的锚点，这解决了问题。

示例： a href="##policy">目的和政策声明

而不是：

a href="#policy">宗旨和政策声明

Answer 7

我也遇到了这个问题（使用 links 进行相同的页面导航）并且解决方案非常简单（虽然令人沮丧）。我希望这会有所帮助——我还检查了 IE、Firefox 和 Chrome，它在所有方面都有效（截至 2019 年 5 月 22 日）。

您的 link 应如下所示：

<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>

Answer 8

尝试使用：对于菜单页

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

在出现在所有页面上的菜单中

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

这适用于 Chrome 的所有版本！
我已经在我的浏览器上测试过了。

Answer 9

如果您发现 SPA 站点的锚点 link 在外部站点不起作用时，不知何故像我一样结束了。是的，浏览器运行速度太快，无法加载页面的框架。加载页面时找不到您的锚点。

要解决此问题，只需在 SPA 的生命周期（React 中的 useEffect 和 Vue 中的 mounted 中添加一些行来检查 url 哈希并进行滚动你自己。

使用 React 的示例

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

Answer 10

此答案适用于遇到相同问题但脚本不起作用的人。尝试从页面上的所有图像中删除 loading='lazy' 和 decoding='async' 或为它们设置 width 和 height 属性。

它对我来说就像一个魅力。

使用 # 时锚 <a> 标签在 chrome 中不起作用

Anchor <a> tags not working in chrome when using #

html

google-chrome

cross-browser