[英]How do I shift the page-scroll for each html section to jump to the top of each section upon clicking its corresponding link in the navbar?
我的页面滚动出现问题。 当我单击导航栏中的链接时,它应该跳到该部分的顶部。 但是,当我单击链接时,它会跳到部分的中间部分。 有没有办法以任何方式移动页面滚动来纠正此问题。 这是我在代码笔上的代码的链接http://codepen.io/perrylivingston/pen/KzadPW?editors=1010
<nav class="navbar-collapse navbar-inverse navbar-collapse-1 navbar-fixed-top" role="navigation">
切换导航
这应该可以完成工作,并确保在底部页面包含js/jquery.easing.min.js
文件
CSS,编辑
.barrier {
top: 80px;
position: relative;
width: 100vw;
}
#headline {
color: #FFFFFF;
}
JS,添加
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top-80
}, 1000, 'easeInOutExpo');
event.preventDefault();
});
});
HTML,编辑:将所有部分放在.barrier
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#home">Home</a></li>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.