如何从导航栏滚动到一个 id

Question

我刚开始使用 javascript/jQuery，但我想单击一个导航栏元素，然后将页面向下滚动到与其对应的 ID。 (ids: #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');

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

Answer 1

您可以不使用 jQuery 来完成。在导航栏元素的锚标记中。将部分的 ID 放在 href 中。

所以像

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

这里的 'about' 和 'contact' 是关于和联系部分的 ID。

Answer 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。现在点击关于 link 它将滚动到特定的 div。

如何从导航栏滚动到一个 id

How to scroll to an id from a navbar

javascript

jquery

scrollto