如何从导航栏滚动到id
如何从导航栏滚动到id
提问于 2017-01-27 13:35:07
我正在使用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'); 有没有人可以帮我创建一个合适的函数让它工作呢？谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-27 13:41:32
您可以在不使用jQuery的情况下完成此操作。在您的导航栏元素的锚点标记中。将节的id放入href中。
所以就像这样
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a><li>这里的' about‘和' contact’是about和contact部分的ids。
Stack Overflow用户
发布于 2017-01-27 13:50:10
我将向您展示一个示例，您可以在其中对代码进行必要的更改。
<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的ids。现在点击About链接，它将滚动到特定的div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41887532
复制相关文章
相似问题
腾讯云开发者
