JavaScriptにおける要素へのウィンドウスクロールメソッド

メソッドscrollIntoViewは、ウィンドウを指定した要素までスクロールします。このメソッドは、ウィンドウをスクロールさせたい要素に対して適用します。 メソッドのパラメータで、要素をウィンドウの上部にするか下部にするかを調整します。

例を見てみましょう。 要素がウィンドウの上部に来るようにスクロールします：

javascriptelem.scrollIntoView(true);

次に、要素がウィンドウの下部に来るようにスクロールします：

javascriptelem.scrollIntoView(false);

設定を持つオブジェクトをパラメータとして渡すこともできます。 要素までスムーズにスクロールしてみましょう：

javascriptelem.scrollIntoView({
  behavior: 'smooth',
});

設定オブジェクトには、要素に対するページの配置に関する設定もあります。 設定blockは垂直方向の配置を、 設定inlineは水平方向の配置を指定します。 これらは次の値を取ることができます： 'start', 'center', 'end', 'nearest'。

試してみましょう：

javascriptelem.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'end',
});