Прокрутка разделов прокрутки случайным образом
Мне нужно кодировать веб-сайт с разделами прокрутки одной страницы без использования плагина (например, fullPage.js). Итак, я только что создал 6 разделов, таких как:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="hlpjs.js" type="text/javascript"></script>
<title>My Website</title>
<link href="hlpcss.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="section1">
<h1>text1</h1>
</section>
<section id="section2">
<h1>text2</h1>
</section>
<section id="section3">
<h1>text3</h1>
</section>
<section id="section4">
<h1>text4</h1>
</section>
<section id="section5">
<h1>text5</h1>
</section>
<section id="section6">
<h1>text6</h1>
</section>
</body>
и я попытался прокрутить разделы в документе JavaScript, как это:
var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
if (count < 6) {
count++;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 2000);
}
} else {
if(count>1){
count--;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 2000);
}
}
});
Но это не работает, как должно. Это просто случайная прокрутка, пока она не окажется вверху (или внизу), а затем остановится.
1 ответ
Я удалил операторы if и добавил полный обратный вызов, так что теперь он работает. Моя единственная проблема в том, что теперь я могу бесконечно прокручивать вверх и вниз, но если я попытаюсь добавить любой оператор if, анимация вообще не работает (какие-либо предложения?). Иначе я пойду с этим:
var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
count--;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 1000,function(){
$('html, body').clearQueue();
});
}
else {
count++;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 1000,function(){
$('html, body').clearQueue();
});
}
});