スクロールバーまたはスクロール機能は、スクロールが行われる位置を決定します。 スクロールバーは、垂直方向だけでなく水平方向にも移動できます。 水平スクロールバーを使用すると、コンテンツを水平方向、つまり左または右にスクロールできます。 垂直スクロールバーを使用すると、コンテンツを垂直方向、つまり上下にスクロールできます。

ここで問題となるのは、JavaScriptまたはjQueryで垂直スクロールを有効にして、ユーザーがボタンをクリックするたびにページが一番上の位置にスクロールするようにする方法です。 良い！ このタスクを実行するために使用できるアプローチがいくつかあります。

この投稿では、ページを一番上の位置にスクロールするための以下のアプローチの仕組みについて説明します。

それでは、始めましょう！

JavaScriptを使用してページを一番上の位置にスクロールするにはどうすればよいですか？

JavaScriptでは、ウィンドウインターフェイスは、ページ上の特定の位置にスクロールするために使用できるscrollTo（）という名前の組み込みメソッドを提供します。

構文

scrollTo（）メソッドを使用するには、以下の構文に従います。

上記のスニペットは、window.scrollTo（）メソッドがパラメーターとしてx座標とy座標を受け入れることを示しています。 両方の座標を「0」として指定すると、scrollTo（）メソッドはページを最上点に移動/スクロールします。

例：window.scrollTo（）メソッドの使用方法は？

上記のプログラムは、以下のタスクを実行しました。

• タグと

  タグを作成して見出しを追加し、インラインCSSを適用してスタイルを設定しました。

• 要素を使用していくつかの段落を作成しました。

• 「上にスクロールバック！」という名前のボタンを作成しました。
• 「一番上までスクロールバック！」をクリックします。 ボタンは「topFun（）」メソッドを呼び出します。
• topFun（）メソッド内で、window.scrollTo（）メソッドを利用しました。
• 両方の座標を0に設定した結果、「上にスクロールバック」をクリックします。 ボタンを押すと、ページが一番上の位置にスクロールします。

出力は、ボタンをクリックするとページが一番上の位置にスクロールされることを確認しました。

jQueryを使用してページを一番上の位置にスクロールするにはどうすればよいですか？

Jqueryは、ターゲット要素の垂直スクロールバーの位置を返す/設定するために使用される「scrollTop（）」という名前のメソッドを提供します。 位置0は、スクロールバーが上部にあることを表します。 したがって、ページの先頭に戻るには、「scrollTop（）」メソッドの引数として「0」を渡す必要があります。

構文

以下の構文に従って、垂直スクロールバーの位置を取得します。

以下の構文に従って、垂直スクロールバーの位置を設定します。

例：scrollTop（）メソッドの使用方法は？

scrollTop（）メソッドの動作を理解するために、次のコードブロックについて考えてみましょう。

上記のコードブロックは、次の機能を実行しました。

• タグと

  タグを作成して見出しを追加し、インラインCSSを適用してスタイルを設定しました。

• 要素を使用していくつかの段落を作成しました。

• 「ここをクリック！」という名前のボタンを作成しました。
• 「ここをクリック！」をクリックします。 ボタンは「topFun（）」メソッドを呼び出します。
• topFun（）メソッド内で、scrollTop（）メソッドを利用しました。
• scrollTop（）メソッドに位置として「0」を渡しました。 したがって、「ここをクリック！」をクリックします。 ボタンを押すと、ページが一番上の位置にスクロールします。

これは、scrollTop（）メソッドがjQueryでどのように機能するかです

結論

JavaScriptでは、パラメータとして「0、0」をwindow.scrollTo（）メソッドに渡すと、ページが一番上の位置にスクロールされます。 jQueryでは、引数として「0」を「scrollTop（）」メソッドに渡すと、ページが一番上の位置にスクロールされます。 この投稿では、window.scrollTo（）メソッドとscrollTop（）メソッドに関する詳細な知識を提供するためにいくつかの例を検討しました。