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

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

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

elem.scrollIntoView(true);

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

elem.scrollIntoView(false);

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

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

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

試してみましょう：

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

要素とボタンが与えられています。ボタンをクリックすると、ページがその要素までスクロールします。説明されたすべての機能を試してください。