JavaScriptのscrollIntoView()を利用した画面スクロールの動作確認ツール
要素の位置までスムーズにスクロールするscrollIntoView()の動作を確認できます。オプション（behavior, block）の効果を視覚的に試せます。
プレビュー
<!-- スクロールボタン -->
<button id="scroll-btn">Scroll to Target</button>
<!-- ターゲット要素 -->
<p id="target-element">Target</p>/* 特になし */const button = document.querySelector('#scroll-btn');
const element = document.querySelector('#target-element');
button.addEventListener('click', () => {
element.scrollIntoView({
behavior: '{{behavior}}',
block: '{{block}}'
});
});scrollIntoView()テスト用
機能・使い方
画面下部のボタン（Page Top / HTML / CSS / JavaScript）をクリックすると、このページ内の該当エリアまでスクロールします。
Behavior: スクロールの挙動を指定します。
smooth: なめらかにアニメーションします。auto: ブラウザのデフォルト設定に従います。instant: アニメーションなしで即座に移動します。
Block (縦位置): スクロール後の配置位置を指定します。
start: 要素を画面の上部に合わせます。center: 要素を画面の中央に合わせます。end: 要素を画面の下部に合わせます。nearest: 現在位置から最短距離で画面内に入れます。
