如何从导航栏滚动到id
如何从导航栏滚动到id
提问于 2017-01-27 05: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 05: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 05: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
复制相关文章
相似问题
蛋糕中的元素
蛋糕php元素缓存
如何使用蛋糕php在jquery中包含php变量
使用伪元素，如: with $(this)
如何在查询中使用数组元素，如
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
