純粋な JavaScript を使用して、クロスブラウザーの上にスクロールするアニメーションを実装するにはどうすればよいですか?

クロスブラウザ JavaScript スクロールトップ アニメーション (jQuery なし)

多くの Web 開発者は、シームレスなページ スクロール機能のために jQuery を利用しています。ただし、外部ライブラリを避けたい場合は、純粋な JavaScript を使用してページの先頭までスクロールする簡単な解決策があります。

クロスブラウザで先頭までスクロールするアニメーションを実現するには、次の手順に従います。

1. scrollTo 関数を定義します: element、to、duration の 3 つのパラメーターを取る関数を作成します。この関数はアニメーションを処理します。

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

   ログイン後にコピー

2. 差分とティックごとの増分を計算: 関数内で、現在のスクロール位置とティックごとの差分を計算します。目的の位置 (to) を長さで割って、ティックごとの増分を決定します。

   <code class="javascript">  if (duration <= 0) return;
     var difference = to - element.scrollTop;
     var perTick = difference / duration * 10;

   ログイン後にコピー

3. アニメーション ループを設定します: setTimeout を使用して設定します10 ミリ秒の頻度で実行されるアニメーション ループ。ループ内で、スクロール位置をティックごとの増分で増分し、目的の位置に到達したかどうかを確認します。

   <code class="javascript">  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

   ログイン後にコピー

4. 使用法: スムーズにスクロールするにはページの先頭に移動するには、scrollTo 関数を次のように呼び出します。

   <code class="javascript">scrollTo(document.body, 0, 600);

   ログイン後にコピー

5. クリック イベント リスナーを追加します: リンクまたはボタンがある場合は、スクロール アニメーションをトリガーし、クリック時に関数を呼び出すクリック イベント リスナーを追加します。

   <code class="html"><button id="scrollme" type="button">To the top</button></code>

   ログイン後にコピー

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

   ログイン後にコピー

この純粋な JavaScript コードは、クロスブラウザーを実現するためのシンプルかつ効果的な方法を提供します。先頭までスクロールするアニメーションにより、jQuery などの外部ライブラリを必要とせずにユーザー ナビゲーションを強化できます。

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