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.

Solution 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!

Solution 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

Solution 3

I've been fiddling with a solution to a similar problem.

All my solution does is monitor when the window scrolls.

if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {

If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".

$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});

It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.

Check out the full code at http://jsfiddle.net/dLCwC/1/

Maybe it'll be of some use to someone (let me know if it is, or isn't).

Comments

[XstiX]

This is very close to what I want - thanks. I found that if I scroll quickly (at least 2 scrolls in less than the duration of the animation) then the animation is cancelled and it stops between the divs. I uploaded the new code to my site if you would like to see how it interacts. Is there a way to not allow another scroll function to fire off until the pervious animation is completed?

[XstiX]

I was having another look, and the 'stopping mid animation problem' seems to only occur with the final div, same as your fiddle demo.

[XstiX]

Looks like exactly what I need - I'm just having a bit of trouble implementing the code into my existing one, probably some position properties messing with it? I'd prefer not to start again so if you have anything you could tell me in regards to what could be stopping the scrolling function that would be great. As soon as I get this working I'll mark the answer.

[Alvaro]

Could you create a jsfiddle with your code? Or give me a link of your site? What is exactly happening?

[Alvaro]

Remember you should follow the needed structure to make it work. You should add the class "section" to your sections as detailed in the documentation.

[Alvaro]

Here you have it working: jsfiddle.net/rDcm3/1 Notice I've included the jQuery UI library and the JS and CSS files of my plugin. Also, I added the section class to your sections and the active class for the first section element. Then I added on document ready the initialization for the plugin. (and I deleted your old code for the old scrolling you had)

[XstiX]

I did all that earlier and couldn't get it to work, but now I can, strange... One final thing was that it seemed to have messed up my hover effects for the left navigation, but with a little bit of tweaking I have exactly what I want! Thankyou so much, I spent countless hours dredging through the internet for a decent full page scroller, I wish I could give you more than one marked answer.

[Alvaro]

@XstiX I've checked your page now and it seems that the over effect is working well. Isn't it? By the way, please download the last version of the jquery.fullPage.js file , I deleted some debug lines which could make it not working over some versions of IE if the javascript console was not active. Nice to know it helps! Any suggestion or problem, contact me on my blog or through github issues.

[MichaelB]

@Alvaro Is it possible to use the library for a scenario where I want normal HTML flow and fullscreen slides only in a part of the website after having scrolled down a bit? I.e. I want normal content with normal scrolling behaviour, and after reaching a special point, the fullscreen stuff begins, and after the last fullscreen slide, it goes back to the normal HTML flow?

[Alvaro]

@MichaelB you could try to use the method setAutoScrolling to turn the autoScrolling on and off. You can call that function setting it to true once the user has scrolled to a specific point. That might work.

[Louis]

@Alvaro is it possible to use your plugin with the html5's tag <section> instead of a <div class="section" ? thanks

[Alvaro]

@Louis no, it is not possible. It has been designed to work in old browsers as well. Maybe in a future I can think of adding an option to configure the selector.

[Alvaro]

@Louis just to let you know, since time ago its possible to add any selector for sections and slides.

[Nebulosar]

This is the greatest awnser of my evening!

[Arunjith R S]

Perfect solution. Thanks @Paul Gorton