Href“#”标签在 Chrome 中不起作用答案

【问题标题】：Href "#" tag not working in ChromeHref“#”标签在 Chrome 中不起作用
【发布时间】：2018-05-18 14:17:37
【问题描述】：

我正在开发一个免费模板“ritmo”，但遇到了一个问题，即 href # 标签在 chrome 中不起作用，但在 firefox 中起作用

<ul class="nav navbar-nav navbar-right">
<li><a id="GoToHome" class="selected-nav" href="#intro">Home</a></li>
<li><a id="GoToFeatures" href="#features">Features</a></li>
<li><a id="GoToVideo" href="#video">Video</a></li>
<li><a id="GoToTestimonials" href="#testimonials-rotator">Testimonials</a></li> 
<li><a id="GoToFAQ" href="#faq">FAQ</a></li>
<li><a id="GoToSubscribe" href="#newsletter">Subscribe</a></li>
</ul>

这里是目标部分

<section id="features"> .... </section>

css 显示属性有什么问题吗？我尝试了多种解决方案，但对我不起作用，这里有一些链接 Solution 1 和 Solution 2

或者我们可以说这是由于页面上的java脚本对href标签的某种限制吗？

【问题讨论】：

您使用的是什么文档类型？
你的 Javascript 代码在哪里？
@Barmar 它不需要任何 javascript 代码 bcz href 将直接转到 #url 部分
那你为什么要标记这个javascript和jquery？
它的工作..check jsfiddle.net/6fkaLbmp

标签： html

【解决方案1】：

a 标记中的href 属性应指向另一个具有name 属性集的a 标记：

<a id="GoToFeatures" href="#features">Features</a>

指向：

<a name="features">    
  enter code here`<section id="features"> .... </section> 
</a>

【讨论】：

不一定。反例：http://php.net/mysql_query#function.mysql-query-refsynopsisdiv
HTML5 不支持name 属性，而是使用id。
HTML5 肯定支持 name 属性，但有优先顺序。首先，“片段”算法寻找第一个元素（任何类型），其 ID 正好等于 fragid；然后对于具有 name 属性的 <a> 元素，其值完全等于 fragid。

【解决方案2】：

好吧，我不是专家级程序员。但是我对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;
       }
     }
   });
 });

【讨论】：