如何从导航栏滚动到 id答案

【问题标题】：How to scroll to an id from a navbar如何从导航栏滚动到 id
【发布时间】：2017-01-27 13:50:09
【问题描述】：

我是使用 javascript/jQuery 的初学者，但我想单击导航栏元素，然后将页面向下滚动到与其对应的 id。（ID：#home、#about、#portafolio、#contact）

这是我的导航栏列表：

<nav class="navbar navbar-default navbar-static-top navbar-fixed-top">
  <div class="container-fluid">
   <ul class="nav navbar-nav navbar-right">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Portafolio</a></li>
   <li role="presentation"><a href="#">Contact</a></li>   
  </ul>

我尝试使用https://github.com/flesler/jquery.scrollTo/blob/master/README.md：

$('ul li').first().click().scrollTo('#home'); 
$('ul li').eq(1).click().scrollTo('#about'); 
$('ul li').eq(2).click().scrollTo('#portfolio'); 
$('ul li').eq(3).click().scrollTo('#contact');

任何人都可以帮助我创建一个合适的函数来让它工作吗？谢谢。

【问题讨论】：

标签： javascript jquery scrollto

【解决方案1】：

您可以在不使用 jQuery 的情况下做到这一点。在导航栏元素的锚标记中。将部分的 id 放在 href 中。

类似

<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a><li>

这里的'about'和'contact'是about和contact部分的ID。

【讨论】：

谢谢，不敢相信我没有注意到。
不过，即使使用 jQuery，您也可以做到这一点。查找 window.location.hash，但您不应该使事情复杂化。
我还处于 html 的起步阶段，再次感谢 ;/

【解决方案2】：

我将向您展示一个示例，看看您可以对代码进行必要的更改。

 <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#portfolio">PORTFOLIO</a></li>
    <li><a href="#pricing">PRICING</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</div>

"#about","#services" 等是赋予 div 的 id。现在点击 About 链接，它会滚动到特定的 div。

【讨论】：