(Auto)Scroll Up/Down to DivTop

Question

I am new to scripting.

Okay, so I am creating single-paged website (alturl.com/3ovx5) having several DIVs with 100% width/height stacked on top of one another. The fixed buttons on the top animate the page to scroll to the top-of-the-desired-DIV and the button is then highlighted by detecting scrollTop.

---

Now I am trying to put in a feature similar to http://www.morethanamap.com/developer-stories/ .. This page responds to mouse-scroll and scrolls to the next/previous DIV automatically, something beyond my league.

Using this code I tried the following:

$(document).ready(function() {

var top0 = $('#page0').position().top;
var top1 = $('#page1').position().top;
// and so on

var oldst = 0; // for OLD-scrollTop

$(document).bind('scroll', function () {
var newst = $(this).scrollTop(); // NEW-scrollTop
 if (newst > oldst) { // user scrolls down
        if (newst < top1) { $('body').animate({scrollTop: top1}, 435); }
   else if (newst > top1 && newst < top2) { $('body').animate({scrollTop: top2}, 435); }
   else if (newst > top2 && newst < top3) { $('body').animate({scrollTop: top3}, 435); }
   else if (newst > top6 && newst < top7) { $('body').animate({scrollTop: top7}, 435); } // and so on
      }
 else { // user scrolls up
        if (newst > top1 && newst < top2) { $('body').animate({scrollTop: top0}, 435); }     
   else if (newst > top2 && newst < top3) { $('body').animate({scrollTop: top1}, 435); }
   else if (newst > top7 || newst = top7) { $('body').animate({scrollTop: top6}, 435); } // and so on
      }
oldst = newst; //update OLD-scrollTop
 });
});

The landing-DIV scrolls down okay, but after that the scroll stops working, and instead the page starts jumping up and down. I guessed there might be a clash in the argument. So, I change the arguments to detect the highlighted (anchor IDed one/two/three....) button, and then scroll up/down accordingly.

New argument becomes:

if (newst > oldst) { 
     if (newst < top1) { $('html, body').animate({scrollTop: top1}, 435); }
else if ($('#one').hasClass('selected')) { $('body').animate({scrollTop: top2}, 435); }
else if ($('#two').hasClass('selected')) { $('body').animate({scrollTop: top3}, 435); }
else if ($('#three').hasClass('selected')) { $('body').animate({scrollTop: top4}, 435); } // and so on
    }

SAME result. Scroll fails after a single go.

Here is the first demo (alturl.com/rizw3) which detects scrollTop.
Here is the second demo (alturl.com/44wp4) which detects highlighted buttons.

HERE is a test (alturl.com/v6sr7) that uses alert-messages to show that the arguments (using the code from first demo) are working fine. However, what I wanna do is disable scrollbar once it is accomplished so, it should be either scroll to DIV above, or DIV below (like the google-maps example).

Hope there is a better way, to work this out? :/

Thanks loads!

Answer 1

I see what you are trying to do, somewhat anchoring it to a fixed point on scroll.

Then it's not going to be smooth handling it with scroll() function alone because dragging the scrollbar can be a big problem (it's going to be jumpy/jerky), I suggest you do the anchoring with mousewheel event only.

In this solution we are using 'anchored' class as the indicator.

$(document).on('mousewheel DOMMouseScroll', function(e) {
    var $anchored = $('div.anchored'), 
         delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;   

    if(delta < 0) { 
        //mousewheel down
        $next = $anchored.next();

        if($next.length){
            $('body, html').stop().animate({scrollTop:$next.offset().top},'slow');     
        } 
    }else{ 
        //mousewheel up
        $prev = $anchored.prev();

        if($prev.length){
            $('body, html').stop().animate({scrollTop:$prev.offset().top},'slow');    
        }
    }
    e.preventDefault();
});

Now if the user scrolls by dragging the scrollbar you also need to move the 'anchored' class indicator to the most visible <div> in viewport.

$(window).scroll(function(){
var st = $(this).scrollTop();

$('div').each(function(){
    var offset = $(this).offset();
    if(st >= offset.top && st < offset.top + $(this).outerHeight()){
        $(this).addClass('anchored');
    }else{
        $(this).removeClass('anchored');
    }
});

});

See this jsfiddle.