ネイティブ JavaScript を使用してスムーズにトップにスクロールするアニメーションを作成する方法

トップまでスムーズにスクロールするネイティブ JavaScript アニメーション

ユーザー エクスペリエンスに関して言えば、シームレスで直感的なトップへのスクロール アニメーションは、 Web ページの機能を大幅に強化します。 jQuery や Moo などの外部ライブラリに依存する代わりに、純粋な JavaScript を使用してこのアニメーションを作成する方法を見てみましょう。

解決策

提供されている JavaScript 関数、scrollTo は、次のことを提供します。ページ上の指定された位置までスクロールするためのクロスブラウザー ソリューション。スクロールする要素 (通常は document.body)、希望のスクロール位置 (ページの先頭の 0 など)、およびミリ秒単位のアニメーションの継続時間の 3 つのパラメーターを取ります。

この関数は次を使用します。時間の経過とともにスクロールをスムーズにアニメーション化する再帰的手法。まず現在のスクロール位置とターゲット位置の差を計算し、ターゲット位置に到達するまで再帰呼び出しごとにスクロール位置を少量 (perTick) ずつ増分します。

このアニメーションをリンクまたはボタンに適用するには、クリックされたときにscrollToを呼び出すイベント リスナーを追加します。たとえば、次のコード スニペットは、「#scrollme」要素がクリックされたときにトップへスクロールするアニメーションを作成します。

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

デモ

提供されたコード スニペットのライブ デモを使用して、トップへスクロールするアニメーションが実際にどのように動作するかを確認します。

結論

提供されたscrollTo 関数を使用すると、次のように実装できます。外部ライブラリを必要とせずに、ブラウザーを超えてスムーズにスクロールしてトップに移動するアニメーション。この純粋な JavaScript ソリューションにより、Web 開発プロジェクトの柔軟性とカスタマイズが向上します。

以上がネイティブ JavaScript を使用してスムーズにトップにスクロールするアニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。