Href 标签在 chrome 中不起作用，但在其他浏览器中起作用答案

【问题标题】：Href tag not working in chrome but working in other browserHref 标签在 chrome 中不起作用，但在其他浏览器中起作用
【发布时间】：2019-08-11 19:09:10
【问题描述】：

我正在设计网站，但遇到了一个问题，即 href # 标签在 chrome 中不起作用，但在 firefox 中起作用

<ul class="navigation" style="margin-top: 75px;">
   <li><a class="scroll-to" href="#section-1">Home</a></li>
   <li><a class="scroll-to" href="#section-2">About Us</a></li>
   <li><a class="scroll-to" href="#section-4">Products</a></li>
   <li><a class="scroll-to" href="#section-5">Clients</a></li>
   <li><a class="scroll-to" href="#section-6">Team</a></li>
   <li><a class="scroll-to" href="#section-7">Contact Us</a></li>
</ul>


<section id="section-1" class="banner-container color-light center nav-trigger">

不知道哪里出了问题

【问题讨论】：

不工作意味着它到底应该做什么？
@brk当我点击第 1 部分链接时，它应该导航到选定的部分，但它不使用 chrome，但在其他浏览器中却可以。
必须是其他可能与某些 javascript 相关的问题。这是所有浏览器中非常基本的功能
@charlietfl 我尝试在开发者工具中检查它，但仍然没有运气
你确定 Chrome 不只是有一个更大的窗口，所以当你点击链接时第 1 部分是可见的？然后它就不会滚动了。

标签： javascript jquery html google-chrome

【解决方案1】：

以下内容在 Chrome 62 中对我来说很好用。你要关闭你的部分标签吗？你确定它有足够的高度可以实际滚动吗？

section {
   padding: 100px;
   border: 1px solid blue;
}

<ul>
    <li><a href="#section-1">Home</a></li>
    <li><a href="#section-2">About Us</a></li>
    <li><a href="#section-4">Products</a></li>
    <li><a href="#section-5">Clients</a></li>
    <li><a href="#section-6">Team</a></li>
    <li><a href="#section-7">Contact Us</a></li>
</ul>
<section id="section-1">Home</section>
<section id="section-2">About Us</section>
<section id="section-4">Products</section>
<section id="section-5">Clients</section>
<section id="section-6">Team</section>
<section id="section-7">Contact Us</section>

【讨论】：

【解决方案2】：

你可以试试这个。 https://www.gregoryvarghese.com/chrome-anchor-link-not-working-fix/

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

【讨论】：

【解决方案3】：

确保每个 div 有足够的高度，以便页面可以滚动。如果没有页面滚动，您将看不到更改，因为您的代码没有任何问题。

<ul>
   <li><a href="#section-1">Home</a></li>
   <li><a href="#section-2">About Us</a></li>
   <li><a href="#section-4">Products</a></li>
   <li><a href="#section-5">Clients</a></li>
   <li><a href="#section-6">Team</a></li>
   <li><a href="#section-7">Contact Us</a></li>
</ul>
<section style="height:500px" id="section-1">Home</section>
<section style="height:500px" id="section-2">About Us</section>
<section style="height:500px" id="section-4">Products</section>
<section style="height:500px" id="section-5">Clients</section>
<section style="height:500px" id="section-6">Team</section>
<section style="height:500px" id="section-7">Contact Us</section>

【讨论】：

【解决方案4】：

我猜它在某些版本的 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);
    }
});

【讨论】：

【解决方案5】：

对我来说，是 href 重定向到带有主题标签的页面，所以我做了这个解决方法：

$('body').on('click', 'a[href*="#"]:not([href="#"])', function(e) {
    if($(this).attr('href').indexOf('http') > -1 && /chrome/i.test( navigator.userAgent) ){
        e.preventDefault();
        window.location.href = $(this).attr('href');
        window.location.reload();
        return false;
    }
});

【讨论】：

这是一个复杂且非常具体的解决方案，尚不清楚何时可行。您需要包含某种分类或解释或分析，尤其是当此答案与针对此问题提供的其他答案大不相同时。