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

Question

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

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

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

 <a id="Sound"><a>

（在我要链接的页面上）

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

原文由 Jake_ 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jake_ 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Doug Edge 发布，翻译遵循 CC BY-SA 3.0 许可协议