Прокрутка разделов прокрутки случайным образом

Мне нужно кодировать веб-сайт с разделами прокрутки одной страницы без использования плагина (например, 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();
    });
 }
});

Другие вопросы по тегам