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

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

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

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

   function scrollTo(element, to, duration) {

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

     if (duration 

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

     setTimeout(function() {
    element.scrollTop = element.scrollTop   perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

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

   scrollTo(document.body, 0, 600);

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

   To the top

   var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);

この純粋な JavaScript コードは、クロスブラウザーでトップ アニメーションにスクロールするためのシンプルかつ効果的な方法を提供し、ユーザーの操作性を向上させることができます。 jQuery などの外部ライブラリを必要としないナビゲーション。