19

ページの読み込み後に自動スクロールするコードを Web ページに実装しようとしています。JavaScript 関数を使用して自動スクロールを実行し、ページの読み込み時に関数を呼び出しましたが、ページはまだスムーズにスクロールしません! ページをスムーズに自動スクロールする方法はありますか?

ここに私のJavascript関数があります:

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
4

8 に答える 8

38

スクロールが 100 ミリ秒ごとに 50 ずつインクリメントされるため、スムーズではありません。

これとスクロールする量をより小さな数値に変更して、より「スムーズ」であるという錯覚で関数を実行させます。

スピード量を下げて、これを速くしたり遅くしたりします。

function pageScroll() {
    window.scrollBy(0,1);
    scrolldelay = setTimeout(pageScroll,10);
}

はるかに滑らかに見えるので、試してみてください ;)

于 2012-03-23T10:42:53.433 に答える
13

jQuery と次のコードを使用してみてください。

$(document).ready(function(){
     $('body,html').animate({scrollTop: 156}, 800); 
});

156 - ページの上部から (px) までスクロールします。
800 - スクロール時間 (ミリ秒)

于 2012-03-23T10:40:12.217 に答える
1

アニメーションのスムーズな実行は、クライアント マシンによって異なります。どれだけ公平にコーディングしても、128 MB RAM システムでのアニメーションの実行方法に満足することはありません。

jQueryを使用してスクロールする方法は次のとおりです。

$(document).scrollTop("50");

AutoScroll Pluginも試してみてください。

于 2012-03-23T10:43:43.683 に答える
1

スムーズにスクロールするjQuery ScrollToプラグインのソース コードを参照してください。または、独自の機能をローリングする代わりに、プラグインを使用することもできます。

于 2012-03-23T10:38:25.637 に答える
0

質問に「jquery」のタグを付けたので、次のようなことを試してみません.animate()か? この特定の jquery 関数は、数値の CSS プロパティやスクロール位置など、あらゆる種類のプロパティをスムーズにアニメーション化するように設計されています。

于 2012-03-23T10:39:05.343 に答える