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

プレーン JavaScript でのクロスブラウザー「トップへスクロール」アニメーション

概要:

シームレスな「トップへスクロール」アニメーションを提供することでユーザーのアクセシビリティを向上させることは、最新の Web 開発にとって不可欠です。 jQuery などの JavaScript ライブラリは便利なソリューションを提供しますが、この機能を純粋に JavaScript で実装すると、軽量化とブラウザ間の互換性にとって有益です。

解決策:

提供される JavaScript 関数、scrollTo を使用すると、任意のページ要素にスムーズな上部へのスクロール アニメーションを実装できます。 3 つのパラメータを取ります:

• element: スクロールする HTML 要素 (通常はページ全体の document.body)。
• to : 希望のスクロール位置 (ピクセル単位)。
• duration: アニメーションの継続時間 (ミリ秒単位) (スムーズなアニメーションの場合は 600ms に設定)。

関数の内訳:

• if (duration : アニメーションの継続時間がゼロ以下の場合、関数を終了します。
• varDifference = to - element.scrollTop: ターゲットのスクロール位置と現在の位置の差を計算します。
• var perTick = 差分 / 期間 * 10: 各間隔でスクロールする量を決定します。
• setTimeout(...): アニメーション ループを一定の間隔 (10 ミリ秒) で実行するタイムアウトを設定します。
• element.scrollTop = element.scrollTop perTick: 計算された perTick 値によってスクロール位置を更新します。
• スクロール位置がまだターゲットと等しくない場合、関数はそれ自体を呼び出します。目標に到達するまで継続時間を短縮して再帰的に実行します。

使用法:

scrollTo 関数を HTML に組み込みます:

<code class="html"><button id="scrollme" type="button">Go to Top</button></code>

クリック イベント ハンドラーをボタンにアタッチします:

<code class="javascript">var scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false);

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

結論:

このスニペットは、クロスを作成するための多用途ツールを提供します。ネイティブ JavaScript を使用したブラウザーの上へスクロールするアニメーション。そのシンプルさと柔軟性により、幅広い Web アプリケーションに適しています。

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