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 makin

Answer 1

Make sure you don't have height:100% or height:100vh on the body. I had this exact same issue and the only thing that fixed it was removing this.

Answer 2

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).

Answer 3

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 4

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