scroll a full page height up or down with jQuery/Javascript

Question

I'm currently working on a site which requires something similar to this in terms of scrolling functionality: http://www.apple.com/iphone-5s/

In the middle of making this question I got part of the site uploaded - http://www.bnacademy.com.au/

I've look through the site's (apple's) code and of course, as I should have suspected, came up empty. I'm looking for a way to have full-page divs (with background images) that can be scrolled through, and the scrolling to the next div happens on a single up/down scroll by the mouse.

I've handled the dynamic full-page divs, I almost even had the scrolling functionality down but it's just not working how I expected and I've already spent a couple of days on this.

HTML:

<div class="splashPage mainDiv"></div>
<div id="containerHomes" class="mainDiv homesPosition"></div>

CSS:

.homesPosition {
    top: 100%;
}

.splashPage {
    background: black;
    z-index: -200;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#containerHomes {
    z-index: -200;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background:url(../img/background-placeholder.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
}

Jquery:

<!-- Keep the div at max page height and width -->
<script type="text/javascript">
var height = $(window).height();
var width = $(window).width();
$(function() {
    $(window).resize(function() {
        $(".mainDiv").height(height);
        $(".mainDiv").width(width);
        $("#sidebar").height(height);
    var height = $(window).height();
    var width = $(window).width();
    });
});
</script>

<!-- Scroll up and down detection/movement -->
<script type="text/javascript">
    $(window).bind('mousewheel', function(event) {
        if (event.originalEvent.wheelDelta >= 0) {
            $(window).scrollTo('0%', 1000);
        }
        else {
            $(window).scrollTo('100%', 1000);
        }
        event.preventDefault()
    });
</script>

I'm using the scrollTo plugin by Flesler (still don't actually have the rep to post more than 2 links)

Which is working fine, but I've yet to find a way to have a full-proof way of scrolling up and down the way I want it. Using what I have up there, if you (like a lot of users) spam the scroll wheel to go up/down I'm pretty sure the wheelDelta count gets messed up and it won't be able to operate properly.

I've tried practically every link on the first 10 pages on google relating to scrolling up and down as functions, as well as most of the questions on S.O. that are relative.

My main goal is the scroll functionality.

Answer 1

After having to code a page like yours, I've created a simple plugin for this kind of sites fullPage.js (Blog article)

It is in its first version. I will keep improving it as far as I can. Adding a method to be called from a menu would be nice, for example. As well as use o hastags (#) for each section, and so on. This should be done soon as I am using it in my page.

You can find more about its usage at my github account

Living demo: http://alvarotrigo.com/fullPage/

Working in: (IE 8, Chrome, Firefox, Opera > 11, Safari, Touch devices)

I hope it helps!

Answer 2

Try this script

$(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length -1) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });

FIDDLE DEMO

Fullscreen Demo