jQueryを使わずにトップへのスムーズなアニメーションスクロールを作成するにはどうすればよいですか?

多くのブラウザでのトップへのアニメーション化されたスクロール (jQuery を除く)

スムーズなアニメーション化された「トップへのスクロール」効果をブラウザに実装します。 Web ページは一般的な要件です。ただし、jQuery などの外部 JavaScript ライブラリに依存することは望ましくない場合があります。この記事では、追加のフレームワークを必要とせずにこのようなアニメーションを作成するためのクロスブラウザ ソリューションを紹介します。

スクリプトについて

提供されたコードには再帰関数が含まれていますこれは 3 つのパラメータを取ります:

1. element: スクロールのターゲット要素 (例: document.body)
2. to: 希望のスクロール位置 (例: 一番上までスクロールする場合は 0)
3. duration: ミリ秒単位のアニメーションの継続時間

関数は、要素の現在のスクロール位置と目的のスクロール位置を比較し、10 ミリ秒ごとにギャップを埋めるために小さな増分を適用します。これにより、段階的でスムーズなスクロール効果が生まれます。

使用例

このソリューションを使用するには、回答に提供されている JavaScript スニペットを含めて、次のリスナーを作成するだけです。スクロールを開始するために使用する要素のクリック イベント。以下に例を示します:

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

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

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

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