0

jQuerymousewheel拡張機能を使用してかなり単純なスムーズ スクロール機能を作成$.mousewheelしましたが、これまでの経験がなかったため、問題が発生しました。

基本的に、一度south delta呼び出されたら、のクラスを$.animate使用して関数を呼び出しますscrollTop.anchor

HTML (質問用に簡略化):

<div id="static-section" class="anchor"></div> <!-- width: 100%; height: 258px -->
<div id="alt-section" class="anchor"></div> <!-- width: 100%; height: 346px -->

jQuery :

$(document).ready(function() {
    $("body").mousewheel(function(event, delta, deltaX, deltaY) {
        if( delta > 0 ) {
            console.log("North: " + delta);
        }

        else if( delta < 0 ) {
            console.log("South: " + delta);
            // ANIMATE TO ANCHOR FUNCTION
            $("html,body").animate({scrollTop: $(".anchor").offset().top}, "slow");
        }

        return false;
    });
});

だから：私の問題は、それが最初のインスタンスにしかアニメーション化されないことです.anchor（これは になります#static-section）scrollTop: $(".anchor").next().top。私の最初の推測は、forループを使用することでした。試してみましたが、うまくいきませんでした (どちらもエラーはありませんでした) for。私がしたことは正しかった。どんな助けでも大歓迎です！

注: jsFiddle (私の Web サイトと同じコード) は、私が既に達成したものと同じものを描写していないため、ライブ デモは利用できません。必要であれば、リクエストに応じて URL を提供します。:-)

4

1 に答える 1

1

.anchorこのようなものは、タグをステップスルーします:

$(document).ready(function() {
    var $anchor = $('.anchor');
    $("body").mousewheel(function(event, delta, deltaX, deltaY) {
        if( delta > 0 ) {
            console.log("North: " + delta);
        }

        else if( delta < 0 ) {
            console.log("South: " + delta);
            // ANIMATE TO ANCHOR FUNCTION
            $("html,body").animate({scrollTop: $anchor.offset().top}, "slow");
            $anchor = $anchor.next('.anchor');
        }

        return false;
    });
});
于 2013-10-27T17:22:00.033 に答える