javascript - scrollTop() and slide-like animation -

i'm trying make page act slideshow, each section appearing slide. html 4 section elements, each ided about, about2, etc. i'm using jquery make them take window height when loading. on scroll down, activated function, goes 1 slide other.

it works on first slide, stuck on it. if reload page , reloads @ position, works until next slide, gets stuck again.

looking @ value, can see conditions there activate next animation (for example, animate #about3), refuses move (always animate #about2 when scrolling).

am doing wrong here?

function scrolldown(){     $height = window.innerheight;     $scroll = $(window).scrolltop();     console.log($scroll+' , '+$height);     if ( $scroll > 0 && $scroll < $height) {         $('html, body').animate({scrolltop: $("#about2").offset().top}, 1000);         } else if ($scroll > $height && $scroll < 2*$height) {         $('html, body').animate({scrolltop: $("#about3").offset().top}, 1000);         } else if ($scroll > 2*$height && $scroll < 3*$height) {         $('html, body').animate({scrolltop: $("#about4").offset().top}, 1000);         } } 

here jsfiddle code: https://jsfiddle.net/9b8s6pna/

you're close missing 1 thing. didn't seem making next section because of number of times scrolldown function being called. created event fire every time scroll takes place , told window more scrolling fire more scroll events creating long chain. essentially, whole bunch of animation requests being queued up. eventually, if let page sit long enough, scroll down about3 section.

i added boolean keep track of when window scrolling , added logic checks. should prevent excessive animation calls :] when conditions met window scroll specific section, boolean 'isscrolling' set true. when animation complete, boolean reset false , scrolling animation can take place.

var isscrolling = false;  function scrolldown(){     $height = window.innerheight;     $scroll = $(window).scrolltop();     console.log($scroll+' , '+$height);     if ( $scroll > 0 && $scroll < $height && isscrolling === false) {             console.log('about1');             isscrolling = true;             $('html, body').animate({                 scrolltop: $("#about2").offset().top             }, 1000, function(){ isscrolling = false; }         );         } else if ($scroll > $height && $scroll < $height * 2 && isscrolling === false) {             console.log('about2');             isscrolling = true;             $('html, body').animate({                             scrolltop: $("#about3").offset().top                             }, 1000,              function(){ isscrolling = false; }          );         } else if ($scroll > 2*$height && $scroll < $height * 3 && isscrolling === false) {             console.log('about3');             isscrolling = true;             $('html, body').animate({                 scrolltop: $("#about4").offset().top                 }, 1000,                 function(){ isscrolling = false; }         );         } } 

also, note, had add 1 minor tweak css set margin on body 0. causing problem in comparisons , make page think scrolled further down was, thereby initiating scroll next section on down throughout whole page. scrolling once, create chain reaction scroll through whole site in 1 go. see in action, remove margin: 0; on body tag on jsfiddle.