Question

Here is the code I am using on my page,

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

(in a menu which appears on all pages)

<a id="Sound"><a>

(on the page where i want to link to)

I have tried adding content to the tags with an id. But only in chrome the browser will not scroll down to the tag. These anchors work in IE&FF Any ideas?

Answer 1

原来这是某些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 2

发布的解决方法对我来说不起作用，但是经过几天的搜索，这终于像魅力一样工作，所以我觉得值得分享：

 $(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 3

如果您以某种方式最终像我一样在这里找到SPA站点的锚链接，则无法从外部站点工作。是的，brwoser的工作速度太快而无法加载页面的框架，因此在加载页面时找不到锚。

要解决此问题，只需添加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 4

以下是我的版本@Jake_答案，Chrome / angular没有使用ui-router在初始页面加载时滚动到正确的锚点（原始答案会将我的代码投入“转换取代”异常）：

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 5

不确定这是否有帮助，但我意识到我在IE中的锚点正在运行，但在Firefox或Chrome中却无法工作。我最终在锚点中添加了##，就解决了这个问题。

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

而不是：

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

Answer 6

我也遇到了这个问题（使用链接进行相同的页面导航），并且解决方案非常简单（尽管很难弄清楚）。我希望这会有所帮助-我也检查了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>

Answer 7

尝试使用：对于菜单页面

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

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

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

这在所有版本的Chrome中都很好用！
我已经在浏览器上对其进行了测试。

Answer 8

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

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

Answer 9

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

使用此代码作为代码，它将调用id值为声音的锚标记

Answer 10

只需将链接上的通话更改为外部。

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

取而代之的是<a> tags not working in chrome when using #

10 个答案: