jQuery 100％滚动到第一部分

Question

I'm trying to scroll 100% of the page to the first section and than have the normal scroll through others sections and vice versa.

I've tried different approach with no results except a loop.. check this fiddle.

This is the structure of the page and every elements has 100% height:

<header>Header content...</header>
<section>Section content...</section>
<section>Section content...</section>
<section>Section content...</section>

Javascript

$(function () {
    var lastScrollTop = $(window).scrollTop(),
        delta = 5,
        eleH = $('header').outerHeight();
    $(window).scroll(function () {
        var nowScrollTop = $(this).scrollTop();
        if (Math.abs(lastScrollTop - nowScrollTop) >= delta) {
            if (nowScrollTop <= eleH && nowScrollTop > lastScrollTop) {
                $('html,body').animate({
                    scrollTop: $('body section:first-of-type').offset().top
                }, 600);
                console.log('Scroll down');
            } else if (nowScrollTop <= eleH && nowScrollTop < lastScrollTop) {
                $('html,body').animate({
                    scrollTop: 0
                }, 600);
                console.log('Scroll up');
            }
            lastScrollTop = nowScrollTop;
        }
    });
});

CSS

html, body {
    height:100%
}
header, section {
    display:block;
    width:100%;
    height:100%;
}
header {
    background-color:gray;
}

As plug-in I've already used Alton (demo link in the fiddle) but it doesn't work quite well if stressed or with the inertia scroll of osX.

Answer 1

To get this to work I added a variable isScrolling which indicates whether the javascript is busy doing the scrolling. When the scroll function is complete I set that variable to false and also recalculate the lastScrollTop

JSFiddle

$(function () {
    var lastScrollTop = $(window).scrollTop(),
        delta = 5,
        eleH = $('header').outerHeight(),
        isScolling = false ;
    $(window).scroll(function () {
        if(isScolling)
            return;

        var nowScrollTop = $(this).scrollTop();
        if (Math.abs(lastScrollTop - nowScrollTop) >= delta) {
            if (nowScrollTop <= eleH && nowScrollTop >= lastScrollTop) {
                isScolling = true;
                $('html,body').animate({
                    scrollTop: $('body section:first-of-type').offset().top
                }, 600, function() {
                    isScolling = false;
                    lastScrollTop = $(window).scrollTop();
                });
                console.log('Scroll down');
            } else if (nowScrollTop <= eleH && nowScrollTop < lastScrollTop) {
                isScolling = true;
                $('html,body').animate({
                    scrollTop: 0
                }, 600, function() {
                    isScolling = false;
                    lastScrollTop = $(window).scrollTop();
                });
                console.log('Scroll up');
            }
            lastScrollTop = nowScrollTop;
        }
    });
});