You need to scroll the page down a little while scrolling down to a certain position.
var scrollHeight = $('.header').height() + $('.main-slider').height();
and scroll the page to the very top if, when scrolling up, the window reaches the same position

HTML

 <div class="main"> <div class="header main-page-header">header</div> <div class="main-slider">main-slider</div> </div>

Jquery

 var scrollHeight = $('.header').height() + $('.main-slider').height(); if ($('.header').hasClass('main-page-header')) { var lastScrollTop = 0; $(window).scroll(function () { var scrollTop = $(window).scrollTop(); if (scrollTop > lastScrollTop) { if (lastScrollTop === 0) { $("html, body").animate({ scrollTop: scrollHeight }, 600); } } if (scrollTop < lastScrollTop) { if (scrollTop < scrollHeight) { $("html, body").animate({ scrollTop: 0 }, 600); } } lastScrollTop = scrollTop; }); }

The first part of the script, scrolling down to a certain position, works as it should, and when scrolling up, when the window reaches the right place, the page scrolls to the top, but then it becomes impossible to scroll down.

http://jsfiddle.net/qwvn7vpo/7/

How to make the code work correctly when scrolling up?

    1 answer 1

    Just don't handle the scroll events while the animation is on,

     var scrollHeight = $('.header').height() + $('.main-slider').height(), $htmlBody = $("html, body"); if ($('.header').hasClass('main-page-header')) { var lastScrollTop = 0; $(window).scroll(function() { if ($htmlBody.is(':animated')) { // <-ТУТ return; }; var scrollTop = $(window).scrollTop(); if (scrollTop > lastScrollTop) { console.log(1); if (lastScrollTop === 0) { $htmlBody.animate({ scrollTop: scrollHeight }, 600); } } if (scrollTop < lastScrollTop) { if (scrollTop < scrollHeight) { scrollTop = 0; console.log(2); $htmlBody.animate({ scrollTop: 0 }, 600); } } lastScrollTop = scrollTop; }); } 
     .main { height: 2000px; width: 100%; background: red; } .header { height: 200px; width: 100%; background: yellow; } .main-slider { height: 200px; width: 100%; background: green; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div class="header main-page-header">header</div> <div class="main-slider">main-slider</div> </div>

    • No, again, the first scroll down and the first scroll up work out normally, and then again does not allow to scroll the page down jsfiddle.net/qwvn7vpo/8 - Heidel
    • everything works fine for me in your fiddle, what is your browser? (my chrome) - zb '
    • one
      In firefox, notice scrollTop=0 for scrollTop <scrollHeight - zb '
    • I just did not work in Chrome. but with scrollTop=0 now everything works as it should, many thanks for the help. - Heidel