Javascript 从导航栏链接移动到Div/ID

好的，我有一个导航栏，当点击链接时，我希望它移动到一个特定的div（即，当点击“关于”链接时，页面移动到页面的“关于”部分）

有关守则的一部分：

<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">David Madrigal's Portfolio</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#About">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link projects">Projects</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

有问题的HTML：

<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">David Madrigal's Portfolio</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#About">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link projects">Projects</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

---

注意，我使用的是Bootstrap4.0。非常感谢您的帮助，谢谢

您错过了Id，只需在节容器中添加一个Id，用于您的案例：

因为在你的锚中，你跳到了

#About

---

这里有一个平滑滚动的解决方案（jquery slim libs不支持animate属性） 下面的片段

$（'a[href^=“#”]”）。在（'click'，函数（事件）{
var target=$（this.getAttribute（'href'）；
if（目标长度）{
event.preventDefault（）；
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
}
});
正文{
背景:#f5dc；
}
琼伯伦先生{
文本对齐：居中；
背景：url（imgs/losangeleskyline.jpg）；
背景尺寸：封面；
背景重复：无重复；
颜色：白色；
边界半径：0；
}
#引导链接{
文字装饰：无；
颜色：白色；
}
#引导链接：悬停{
文字装饰：下划线；
颜色：#014c8c；
}
#信息卡{
边缘底部：20px；
垫底：5px；
}
#卡块{
垫底：20px；
边缘底部：20px；
}
.卡片按钮{
左边距：5px；
右边距：5px；
}
#模板容器{
边框：5px实心rgba（220,220,220,0.4）；
边缘顶部：10px；
填充：30px；
垫底：25px；
背景：#ffffff；
}
.表格按钮{
边缘顶部：20px；
}
.页脚{
文本对齐：居中；
背景色：#292b2c！重要；
垫底：5px；
填充顶部：20px；
边缘顶部：5px；
页边距底部：0；
}











欢迎
这是一个我将添加所有网站作品的网站

本网站使用的是使网站视觉愉悦



关于开发者
欢迎来到我的投资组合！
你好！这是我所有作品的个人作品集，将是开源的，可以随意更改。只需确保提供所用框架的链接，以便其他人可以使用它们创建项目！
第1区
特殊头衔待遇
具有以下支持文本，作为附加内容的自然引入
特色：“只是随意的沉思……”
我的第一个网站W/引导！
具有以下支持文本，作为附加内容的自然引入
第2区
特殊头衔待遇
具有以下支持文本，作为附加内容的自然引入
特色技能
HTML
95%


CSS
85%


JavaScript
65%
全名
请输入您的全名（第一名和最后一名）
电子邮件地址
我们将永远不会与其他人共享您的电子邮件。
密码
提交
&2017年复印件。大卫·马德里加尔·埃尔南德斯

通过“移动到特定div”您的意思是滚动到该位置，对吗？正确，如果我不够清楚，很抱歉：/你的锚定标记正在为你做这件事…它不起作用的原因是因为你没有为锚定标记跳转到它上面的任何元素应用任何id。当我能回到我的电脑时，我会测试一下，如果它有效的话，我会更新。所以更新：添加id标签有效，除了项目链接，出于某种原因，它似乎有点挑剔，除非我完全错过了什么。我还想为他们实现一个平滑的滚动，但不确定如何在JS中使用.animate（）属性（这似乎是我从本网站其他帖子收集到的正确方法）。好的，这很有效。要添加平滑卷轴，我可以做什么？我尝试使用.animate（）属性，但始终无法使其正常工作。此外，我还添加了相应的ID标记，但projects one似乎是唯一不想工作的。该站点是。从您的JSFIDLE中，您使用的是jQuery的精简版本，它不包括大部分库。因此，您应该使用完整版本。对于一个项目，您不能在ID中包含空间，而是考虑使用<代码>类< /代码>。如果这对您有帮助，请随时将其标记为答案。因此，href应该是
href=“.Projects”
，而不是
href=“#Projects”
？另外，谢谢你的第一条评论，完全忽略了…：/非常感谢。这就是我所希望的。唯一似乎不起作用的是“项目”选项卡，尽管我可能忽略了其中的某些内容。我会尝试修改一下，看看是否可以解决这个问题。好的，那么更新：我需要做的就是将id从包含容器流体类的div移动到包含行类的div。所以代码看起来是这样的：。。。。