7

ブラウザをページの一番上までスクロールする関数で使用できる代替手段はありますか？現在使用しているのは：$('html, body').animate({scrollTop: '0px'}, 300);。

他に何かあるのでしょうか、それともjQueryではないものがありますか？

4

2 に答える 2

4

以下は、scrollTop関数の純粋なJavaScript実装です。setIntervalを非同期のwhileループとして使用し、ページの上部を基準にしたスクロールバーの位置を表すpageYOffset値を定期的にデクリメントします。

明確にするために、whileループは、ページ上の他のスクリプトの実行をブロックし、ステップ値に関係なく、一番上へのスクロールを瞬時に表示します。一方、50msの反復を伴うsetIntervalは、50msごとに1回だけページをブロックし、個々の反復の後にスクロールバーUIを更新します。

この関数は、スクロールバーが画面の上部に移動する速度を決定する単一のパラメーター「step」を取ります。ステップが小さいほど、スクロールバーが上に移動する速度が遅くなります。

function scrollTop(step) {
    var start = window.pageYOffset;
    var count = 0;
    var intervalRef = setInterval( (function(interval, curOffset) {
        return function() {
            curOffset -= (interval * step);
            console.info("offset = " + curOffset);
            window.scrollTo(0, curOffset);
            console.info("pageYoffset = " + window.pageYOffset);
            count++;
            if(count > 150 || curOffset < 0) clearInterval(intervalRef);
        }
    })(step, start--), 50);
}

// scroll to the top from the middle of the page in about 5 seconds.
scrollTop(5);

// scroll to the top in about 1 second
scrollTop(15);

// scrolls to the top very fast!
scrollTop(35);

オフセットが0に達すると、間隔は停止します。これは、スクロールバーがページの上部に到達したことを意味します。

ただし、カウントチェッカーは、アクションを150回の反復に制限して、ブラウザーを変更することにした場合にブラウザーがロックされないようにするためのものです。それ以外の場合は、その状態を削除できます。

于 2012-05-19T07:56:25.173 に答える
2

Hiyaワーキングデモ http://jsfiddle.net/jqj9T/5/ または http://jsfiddle.net/jqj9T/5/show/

これはあなたが探しているものですか、IE-8でもチェックされています、このバージョンは動作します。

http://api.jquery.com/animate/

http://api.jquery.com/scrollTop/

お役に立てれば、

私は150から始めて、それがどのように機能するかをデモ/表示することに注意してください。あなたの場合は0に変更できます。

低速を使用する別のバージョン：http：//jsfiddle.net/jqj9T/7/

Jqueryコード

if( $('html,body').scrollTop() != 150 ){
    $('html,body').animate({scrollTop: $(window).scrollTop() + 150}, 300);
}
于 2012-05-19T02:46:01.727 に答える