jquery - iPhone 5cのページのように少し下にスクロールした後、次のdivにスライドする方法は?

Question

iphone 5Cの紹介ページのスクロール効果がなかなか面白い。現在のボックスのスクロールが終了すると、次のコンテンツ ボックスの上部に自動的にスナップします。

http://www.apple.com/hk/iphone-5c/

jquery プラグインが関与していることを 1 時間見つけようとしましたが、失敗しました。その効果の作り方、またはそれに関するチュートリアルの場所を教えてください。

ありがとうございました。

Answer 1

JQuery Mousewheel Plugin と scrollTo で解決しました:

var isScrolling = false;

$('.onepager').mousewheel(function (event, delta) {
    if (!isScrolling) {
        isScrolling = true;
        if (delta < 0) {
            if ($next = $('#navbox').find('.active').next('li').children('a').attr('href')) {
                $('.onepager').scrollTo($next, {
                    offset: -120,
                    duration: 1000,
                    onAfter: function () {
                        isScrolling = false;
                    }
                });
            } else
                isScrolling = false;

        }
        else if (delta > 0) {
            if ($prev = $('#navbox').find('.active').prev('li').children('a').attr('href')) {
                $('.onepager').scrollTo($prev, {
                    offset: -120,
                    duration: 1000,
                    onAfter: function () {
                        isScrolling = false;
                    }
                });
            } else
                isScrolling = false;
        }
    }
    return false;
});