我有一个包含部分和引导导航栏的网页网站。我可以通过单击导航栏中的链接，滚动（自动滚动到下一部分）并单击箭头（上/下）来移至其他部分。 我的问题是：当我单击链接或单击箭头以移动到其他部分，然后滚动时，滚动不会采用新的位置/部分，而是像在上一个部分一样进行操作。示例：我在第二部分，单击链接并移至第四部分，然后向上滚动。我没有去第3部分，而是先去了。 我的js代码是：
/*fullpagescroll*/
$(document).ready(function() {
var scrollLink = $('.scroll');
/*smoothScrolling */
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 800)
})
/*active link */
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 50
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass('active')
$(this).parent().siblings().removeClass('active')
}
})
})
});
//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 500);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 500);
}
}
});
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
我的html是：
<!DOCTYPE html>
<html>
<head>
<title>CKB </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<!--<section id="move"> -->
<!-- NAVBAR-->
<section id="pageA">
<nav class="navbar navbar-default navbar-fixed-top">
<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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand ml-auto">Brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="scroll" href="#pageA">Start</a></li>
<li ><a class="scroll" href="#pageB">About us</a></li>
<li ><a class="scroll" href="#pageC">Prices</a></li>
<li ><a class="scroll" href="#pageD">Knowledge</a></li>
<li ><a id="right" class="scroll" href="#pageE">Contact</a></li>
<li ><a id="right" class="scroll" href="#pageF">Localization</a></li>
</ul>
</div>
</div>
</nav>
<!---LOGO -->
<div class= "down">
<a href="#pageB" class="hvr-hang"><img src="down.png"></a>
</div>
<!-- strzałki nawigujące -->
</section>
<section id="pageB">
<div class= "up1">
<a href="#pageA" class="hvr-bob"><img src="up.png"></a>
</div>
<div class= "down ">
<a href="#pageC"class="hvr-hang"><img src="down.png"></a>
</div>
</section>
<section id="pageC">
<div class= "up">
<a href="#pageB" class="hvr-bob"><img src="up.png"></a>
</div>
<div class= "down">
<a href="#pageD" class="hvr-hang"><img src="down.png"></a>
</div>
</section>
<section id="pageD">
<div class= "up">
<a href="#pageC" class="hvr-bob"><img src="up.png"></a>
</div>
<div class= "down">
<a href="#pageE" class="hvr-hang"><img src="down.png"></a>
</div>
</section>
<section id="pageE">
<div class= "up">
<a href="#pageD" class="hvr-bob"><img src="up.png"></a>
</div>
<div class= "down">
<a href="#pageF" class="hvr-hang"><img src="down.png"></a>
</div>
</section>
<section id="pageF">
<div class= "up">
<a href="#pageE" class="hvr-bob"><img src="up.png"></a>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
我的CSS是：
body {
overflow:hidden;
}
#content {
left:50%;
position: center;
padding-top: 10%;
text-align: center;
text-shadow: 5px 4px 3px rgba(0,0,0,0.4),
5px 8px 13px rgba(0,0,0,0.1),
5px 18px 23px rgba(0,0,0,0.1);
}
#logo {
width: 350px;
height: auto;
}
#sentencja {
padding-top: 1%;
margin-top: 0;
text-align: center;
color: white;
font-style: italic;
font-size: 2em;
}
.navbar-default {
background-color: black;
font-size: 1.15em;
font-weight: bold;
opacity: 0.8;
/*border-bottom: 2px solid grey;
height: 70px;
padding-top: 0.7%; */
}
.navbar .navbar-collapse {
text-align: center;
}
@media (min-width: 768px) {
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
}
@media (min-width: 768px) {
.navbar-nav > li {
display: inline-block;
float:none;
}
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white;
}
@media only screen and (max-width: 750px) {
.navbar-default .navbar-collapse {
border-color: grey;
background-color: black;
}
}
.navbar-default .navbar-brand { /* kolor */
color: #d6d6d6;
}
@media (min-width:768px){
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
float: left;
margin-right: -190px;
}
}
section {
width: 100%;
height: 750px;
float: left;
}
#pageA {
background: orange;
height:100%;
width:100%;
}
#pageB {
background: red;
height:100%;
width:100%;
}
#pageC {
background: yellow;
height:100%;
width:100%;
}
#pageD {
background: blue;
height:100%;
width:100%;
}
#pageE {
background: green;
height:100%;
width:100%;
}
#pageF {
background: white;
height:750px;
width:100%;
}
h1 {
text-align: center;
color: white;
margin-top: 70px;
}
h3 {
color: white;
}
.up {
position:relative;
padding-top:5.5%;
left:47.5%;
}
.up1 {
position:relative;
padding-top:7%;
left:47.5%;
}
.down {
position:relative;
left:47.5%;
padding-top: 475px;
}
*/
.down1 {
padding-top: 60px;
}
如何同步？谢谢