純粋な JavaScript を使用して、ブラウザに依存しないトップへのスクロール アニメーションを作成するにはどうすればよいですか?

ブラウザに依存しないトップへのスクロール アニメーション

リンクの単純な「トップへスクロール」アニメーションを作成するタスクに直面した場合、 jQuery や MooTools などの JavaScript ライブラリに手を伸ばしたくなります。ただし、純粋な JavaScript を使用してこの効果を実現し、ブラウザ間の互換性を確保することは可能です。

提供されたコードは、指定された期間にわたってドキュメントを上部にスムーズにスライドさせるスクロール アニメーションを実装しています。これはスクロール バーのある任意の要素に適用できるスタンドアロン関数であり、ページの先頭にすぐに戻ることができるため、ユーザー エクスペリエンスが向上します。

1. 関数シグネチャ:

<code class="javascript">function scrollTo(element, to, duration) {</code>

• 要素: スクロールされる要素、通常は html 要素または body 要素。
• to: ピクセル単位のターゲット スクロール位置。
• duration: アニメーションの継続時間 (ミリ秒単位)。

2. アニメーション ロジック:

• 継続時間が正でない場合
• ターゲットと現在のスクロール位置の差が計算されます。
• アニメーション フレームごとの増分スクロール量を決定するために perTick 値が計算されます。
• setTimeout を使用すると、目標に達するまでスクロール位置が 10 ミリ秒間隔で徐々に調整されます。

3. 使用例:

提供された HTML スニペットでは、ID が「scrollme」のボタンがアニメーションのトリガーとして使用されます。

<code class="javascript">function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)</code>

• クリックされると、runScroll 関数がscrollTo アニメーションを呼び出し、ページをスクロールします。上部は 600 ミリ秒を超えています。

以上が純粋な JavaScript を使用して、ブラウザに依存しないトップへのスクロール アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。