How to scroll to the needed div in wrapper?

Question

There is the following code:

    <div id="main">
        <div id="first">
            First item
        </div>
        <div id="second">
            Second item
        </div>
        <div id="third">
            Third item
        </div>
    </div>

CSS styles:

    #first {
        background-color: yellow;
    }
    #second {
        background-color: blue;
    }
    #third {
        background-color: green;
    }
    html, body, #main, #first, #second, #third {
        height: 100%;
    }

There are 3 div in main div and user scrolls in order to go to the bottom of the screen. I want to do the following thing: when user scrolls with mousewheel the first time he goes to "second" div, the second time - "third" div. This feature has been realized on the following site: some site. Please, tell me some advice. Thanks.

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — kwcto, Aug 28 '13 at 16:08
@bayfrontconsulting this is a bit more complex than that if there can be a variable number of elements to scroll. — Alvaro, Aug 28 '13 at 16:08
Hmm... I think your example doesn't help me. I know how to catch clicks by menu and animate to needed point. I don't know how to catch mouse's scrolling and animate to next/previous div — malcoauri, Aug 28 '13 at 16:11
@ДенисНагибин I added a living demo at my answer. Hope it helps. — Alvaro, Aug 28 '13 at 16:28
@ДенисНагибин I just noticed my previous solution didn't work well over IE9 or lower. I've updated my answer with a new live demo. — Alvaro, Aug 30 '13 at 15:26

Alvaro · Accepted Answer · 2013-08-30T15:25:43.810

Living demo: http://jsfiddle.net/xz2DN/1/

Update for IE: http://jsfiddle.net/xz2DN/6/

(html element is scrolled, as the body contains the css property overflow:hidden which makes it impossible to scroll for IE)

You need to:

Disable the scrolling bar on the site
Detect the mousewheel event (not working in old browsers)
Have knowledge of which section are you in before scrolling up or down
Update that status once you move from one to another section

You could try to look for each of this points by separate and you will get it working :)

Disabling scrolling bar and default scrolling

body,html{
    overflow:hidden;
}

Detecting mouse wheel:

http://www.sitepoint.com/html5-javascript-mouse-wheel/

Having knowledge of which section are we in

I would recommend you to create an array with a pair of values id, status. The id would be the id tag of the current section and the status would indicate you if is the current "slide"/section or not.

You could do something like this:

var sections = {};
var numberSections = 0;
$('.section').each(function(index, element){
    //current slide is active
    if(!index){
        sections[$(this).attr('id')] = 1;   
    }
    else{
        sections[$(this).attr('id')] = 0;
    }
    numberSections++;
});

And then you should define two functions, one to move update the status of the array when the user scrolls up, and the other for the case in which they scroll down.

How to scroll to the needed div in wrapper?

1 Answers1