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

问题:

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, thanks in advance.

回答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!

回答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

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

回答4:

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.