html - 使用 anchor 链接的导航不起作用

标签 html css

有 3 个导航选项。当我点击它们时,我希望我的页面滚动到这个元素。我确实喜欢教程。 在上面做了一个 anchor 链接并命名了一个部分,移动到哪里。 但是当我点击 anchor 时,我的导航有点偏顶,仅此而已。 我点击的每个链接都会发生这种情况。帮助!!

    Navs:

      <div class="bar" id="about"><a href="#about"><b>About</b></a></div>
      <div class="bar" id="skills"><a href="#skills"><b>Skills</b></a></div>
      <div class="bar" id="contacts"><a href="#contacts"><b>Contacts</b></a></div>

    Sections:

      <h3 class="about_head"><a id="about">Some facts about me</a></h3>
      <h3 class="skills_head"><a id="skills">Langugages and Tools i'm familiar with</a></h3>
      <h3 class="postcard_head"><a id="contacts">Leave your feedback</a></h3>                           

最佳答案

从所有 div 标签中删除 id,它将起作用

<div class="bar"><a href="#about"><b>About</b></a></div>
<div class="bar"><a href="#skills"><b>Skills</b></a></div>
<div class="bar"><a href="#contacts"><b>Contacts</b></a></div>

<div class="bar" id="about"><a href="#about"><b>About</b></a></div>
<div class="bar" id="skills"><a href="#skills"><b>Skills</b></a></div>
<div class="bar" id="contacts"><a href="#contacts"><b>Contacts</b></a></div>

关于html - 使用 anchor 链接的导航不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39572972/

相关文章:

php - 当客户添加票证时,我想向该部门的所有员工发送邮件

html - 样式选项卡选择的元素?

html - 如何将此工具提示置于顶部?

jquery - 将默认事件状态添加到悬停滑动 Accordion li

Javascript 尝试更改动态创建的 html 列表中的文本颜色

css - Bootstrap 3.6 - 高度为 100% 的 Div

javascript - 本网站的文字/元素定位是如何实现的

javascript - 如何在 JavaScript 中获取 html 实体的数字、十六进制和 ISO

html - -webkit-transform ipad 中的闪烁

html - 当相邻的内部和外部元素的边距坍塌时