[英]Navbar to scroll to position after click
嗨,大家好,我想做一些js工作和学习,我想创建一个简单的导航栏,因此当用户单击它时,它将带他们到屏幕的该部分,全部位于一页上,但是方式我这样做似乎很长而且很糟糕,我想知道是否有更简单的方法可以做到? 或为您提供帮助的图书馆等。如果有人可以向我展示教程或可以帮助您的内容
的HTML:
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="10">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
<li><a href="#d">d</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
JS:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#navbar a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#navbarr ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
CSS:
affix {
top: 0;
width: 100%
}
.affix + .section {
margin-top: 68px;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
z-index: 1
}
.navbar-nav {
float: none;
margin: 0;
text-align: center
}
.navbar-nav>li {
float: none;
display: inline-block
}
.navbar-nav>li>a {
line-height: 38px
}
.navbar-nav>li>a.active {
background-color: #E7E7E7
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #333333;
background-color: #E7E7E7
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #000000
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: transparent
}
#a{
height: 700px;
background-color: Red;
}
#b{
height: 700px;
background-color: blue;
}
#c{
height: 700px;
background-color: yellow;
}
#d{
height: 700px;
background-color: black;
}
您应该能够使用此代码段在链接单击时平滑滚动到所需的元素:
$("#navbar a").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
工作示例: https : //jsfiddle.net/345jpqwo
你可以用这个
$('ul.navbar-nav>li').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $('#'+$href).offset();
$('body').animate({ scrollTop: $anchor.top },1000);
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.