Chrome / Firefox中的HTML简单锚链接不起作用 [英] HTML simple anchor link doesn't work in Chrome/Firefox

问题描述

我在这里制作一个投资组合页面（ http://198.96.94.51/v2/ ），同时点击 navigationMenu 链接非常快，他们似乎没有重定向到合适的锚点（其中一些根本不移动页面）。我已经初始化了我的定位标记，例如

 < ol class =curtains> 
< li id =homeclass =cover> 
< a id =home>< / a> 
< header data-fade =550data-slow-scroll =3> 
< h1> John Smith< / h1> 
< h2> HOBBY / JOB TITLE< / h2> 
< / header> 
< / li> 
< / ol> 
  

我的导航栏代码 -

 < ul id =navigationMenu> 
< li> 
< a class =homehref =＃home> 
< span>主页< / span> 
< / a> 
< / li> 
< li> 
< a class =abouthref =＃about> 
< span>关于< / span> 
< / a> 
< / li> 
< li> 
< a class =projectshref =＃projects> 
< span>项目< / span> 
< / a> 
< / li> 
< li> 
< a class =resumehref =＃resume> 
< span>简历< / span> 
< / a> 
< / li> 
< li> 
< a class =contacthref =＃contact> 
< span>联系我们< / span> 
< / a> 
< / li> 
< / ul> 
  

但是只需点击导航栏，甚至在地址栏中输入#home也不会带来浏览器有时会回到顶端。是否有什么我做错了？

解决方案

标识定位点，因此它们必须是唯一的。
$ b

但是，如果您只想进入页面的顶部，您应该尝试一个简单的＃作为您的href属性的值。

链接到例如< div> 标签会引导您访问< div> 标签。

 < a href =＃anchor>< / a> 
 
< div id =anchor>< / div> 
  

这个小提示表明： http://jsfiddle.net/aYGFR/1/

I'm making a portfolio page here (http://198.96.94.51/v2/) and while clicking on the navigationMenu links on the side really fast, they don't seem to redirect to the proper anchor (some of them don't move the page at all). I've initialized my anchor tags like this

<ol class="curtains">
    <li id="home" class="cover">
        <a id="home"></a>
        <header data-fade="550" data-slow-scroll="3">
            <h1>John Smith</h1>
            <h2>HOBBY/JOB TITLE</h2>
        </header>
    </li>
</ol>

My navbar code -

<ul id="navigationMenu">
    <li>
        <a class="home" href="#home">
            <span>Home</span>
        </a>
    </li>
    <li>
        <a class="about" href="#about">
            <span>About</span>
        </a>
    </li>
    <li>
         <a class="projects" href="#projects">
            <span>Projects</span>
         </a>
    </li>
    <li>
        <a class="resume" href="#resume">
            <span>Resume</span>
        </a>
    </li>
    <li>
        <a class="contact" href="#contact">
            <span>Contact us</span>
        </a>
    </li>
</ul>

But just clicking on the navbar, or even typing #home into the address bar won't bring the browser back to the top sometimes. Is there anything I'm doing wrong?

解决方案

Ids identify anchor points so they must be unique.

But if you just want to go to the top of the page you should try a simple # as value for your href attribute.

A link to the id of e.g. a <div> tag would lead you to this <div> tag.

<a href="#anchor"></a>

<div id="anchor"></div>

this fiddle shows you: http://jsfiddle.net/aYGFR/1/

这篇关于Chrome / Firefox中的HTML简单锚链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！