5

「一番上に移動する」ことを目的として、ページ全体にいくつかのリンクがあります。これは、素敵なアニメーションでページを一番上までスクロールすることで実現されます。たとえば、ページがスクロールしているときに、ユーザーが下にスクロールしたい場合があることに気づきましたが、これは不可能です。画面は途切れますが、上部に到達するまでアニメーションを続けます。

ユーザーがスクロールしようとした場合にアニメーションを停止したいので、次のコードを記述しました。

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

このコードは問題があります。animate（）はスクロールとしてカウントされるため、停止する前にほんの少しだけ移動します。

オプションとしてキーダウンも試しましたが、マウスのスクロールがキーとして登録されません。

animate（）ではなく、ユーザーがスクロールしたときにスクロール関数を呼び出す方法はありますか？

4

3 に答える 3

5

独自のコードを記述してアニメーション値を設定し、変更がアニメーションからのものであることを示すフラグを設定することができます。

例:(テストされていません）

var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
    scrollAnimating = true;
    E.elem.scrollTop = E.now;
    scrollAnimating = false;
};

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        if (!scrollAnimating)
            $('body').stop();
    });
    return false;
})

についても同じことができますscrollLeft。

scrollTop設定は再入可能な呼び出しであると想定しているため、scrollイベントは回線内で発生することに注意してくださいE.elem.scrollTop = E.now。再入可能でない場合（一部のブラウザーでのみ発生する可能性があります）、イベントはにscrollAnimating戻された後に発生しfalseます。これを修正するには、イベントscrollAnimating内でリセットできます。scroll

于 2009-11-02T02:51:52.783 に答える
1

私も同じ問題を抱えていましたが、jQueryのドキュメントで解決策を見つけました。animateメソッドには、アニメーションの完了時にコールバック関数を設定できるプロパティがあります。

http://api.jquery.com/animate/#animate-properties-duration-easing-complete

コードは次のとおりです。

$('#gototop').click(function() {

    //This will help you to check 
    var animationIsFinished = false;

    $('body').animate({scrollTop:0},3000,"swing",function(){

        //this function is called when animation is completed
        animationIsFinished = true;

    });
    $(window).scroll(function () {
        //Check if animation is completed
        if ( !animationIsFinished ){
            $('body').stop();
        }
    });
    return false;
})
于 2018-01-13T00:04:58.850 に答える
-2

理解した！インターネットを見て回った後、スクロールイベントをキャッチするDocument.addEventListenerMozillaとdocument.onmousewheelIEとOperaと呼ばれるものを見つけました。

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
    document.onmousewheel = stopScroll;

    function stopScroll() {$('body').stop()};

    return false;
})
于 2009-11-02T03:04:24.863 に答える