web-dev-qa-db-ja.com

JavaScriptを使用したスムーズな自動スクロール

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

これが私のJavaScript関数です：

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

100ミリ秒ごとにスクロールが50ずつ増えるため、スムーズではありません。

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

これを速くしたり遅くしたりするには、速度の値を下げます。

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

はるかにスムーズに表示されます。試してください;）

25
Michael Zaporozhets

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

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

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

9
Antonix

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

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

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

AutoScroll Plugin を試してみることもできます。

1
Starx

これを行うには、jfunc関数を使用できます。使用する jFunc_ScrollPageDownおよびjFunc_ScrollPageUp 関数。 http://jfunc.com/jFunc-Functions.aspx 。

1
Dany Maor

スムーズにスクロールする jQuery ScrollTo プラグインのソースコードを確認することをお勧めします。または、独自の関数をロールするのではなく、プラグインを使用することもできます。

1
Klaus Byskov Pedersen

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

0
tdammers