Auto Scroll To A each div or element

Question

I need some help regarding auto scroll to each div or element when the user will use the scroll button in the mouse. Here goes the scenario

Suppose this is my structure of the page..

<div id="main-wrap">

<div class="my-div-1">
    <p>here goes my content 1</p>
    <img src="/images/sample-1" alt="sample-1"/>

</div>

<div class="my-div-2">

<p>here goes my content 2</p>
<img src="/images/sample-2" alt="sample-2"/>

</div>

<div class="my-div-3">

<p>here goes my content 3</p>
<img src="/images/sample-3" alt="sample-3"/>

</div>

</div><!-- end of main-wrap id -->

-Now suppose my each div has got enough content to make the page long. Suppose the user is on my-div-1 and when the viewer uses the scroll button to scroll down, instead of scrolling through the whole div, i want it to scroll automatically to the my-div-2.

I hope my explanation make sense here.

Is there any way to sort it out by using javascript and jquery?

I will appreciate any response..Thanks in advance.

Answer 1

Here's a fiddle with what you want: http://jsfiddle.net/3qxhY/9/

Source of plugin used in code (debounce/throttle plugin): http://benalman.com/projects/jquery-throttle-debounce-plugin/

Code

// debounce/throttle plugin
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

//elements you want to scroll to go here
divs = [$(".my-div-1"),$(".my-div-2"),$(".my-div-3")];

var lastScrollTop = 0; //we'll update this on every scroll and compare it to the last scroll to determine the scroll direction
var run = true;

$(window).scroll($.debounce(250, true, function () { //debounce so it only runs once per scroll
  var st = $(window).scrollTop();
  if (st > lastScrollTop) { // if the scrollTop when the scroll event fires is larger than the last scroll, we can assume the scroll was in a downward direction
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i + 1); //compare each elements offset to the windows offset to determine which element we're currently scrolling through
    });      
    run = (next != divs.length) ? true : false; //dont run if we are at the last div
  } else {
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i);
    }); 
    run = true;
  }
  if (run) {
    $('html, body').animate({
      scrollTop: divs[next].offset().top
    }, 1000,'linear', function() {
      lastScrollTop = $(window).scrollTop();
    });
  } else { lastScrollTop = $(window).scrollTop(); }
}));