scrollIntoViewのすべてのオプションをライブのボックスで試し、固定ヘッダーの下に隠れる見出しをscroll-margin-topで修正し、JavaScriptと素のCSSでのスムーズスクロールのコードをコピーできます。
要素を表示領域に入れるには、element.scrollIntoView({ behavior: 'smooth', block: 'start' })を呼び出します。blockは縦方向の着地位置を決めます：start、center、end、nearestのいずれかです。固定ヘッダーがターゲットを覆ってしまう場合は、JavaScriptでオフセットを計算するのではなく、CSSでターゲットにヘッダーの高さと同じscroll-margin-topを指定しましょう。
scrollIntoViewのオプション
ページを要素まで移動させる方法は3つあります：要素に対するscrollIntoView、ピクセル位置を指定するscrollTo、そしてidへの普通のリンクです。プレイグラウンドでは各block値の動作と、scroll-margin-topが固定バーから見出しを守る様子を確認でき、その後の例ではメニュー、フォームのエラー、チャット風のリストに必要なコードを紹介します。
ターゲットにscroll-margin-topを追加します。例：h2 { scroll-margin-top: 80px }。CSSのscroll snapの仕様では、スナップを使っていなくても、scrollIntoViewと#idへのリンクでこのマージンを尊重するようブラウザーに求めています。
scrollIntoViewやscrollToにbehavior: 'smooth'を渡すか、html要素にscroll-behavior: smoothを設定すると、プログラムによるすべてのスクロールとページ内リンクがアニメーションします。scroll-behaviorは、ユーザーがホイールやタッチで行うスクロールには影響しません。
scrollIntoViewは要素を起点に動作し、位置を自動で計算します。window.scrollTo({ top, behavior })は正確なピクセル位置へ移動し、scrollByは相対的な量だけ移動します。保存した位置に戻るときなど、すでに数値がわかっている場合はscrollToを使いましょう。
window.scrollTo({ top: 0, behavior: 'smooth' })です。スクロール可能なパネルの場合は、windowの代わりにパネル要素で同じメソッドを呼び出します。
よくある原因は、要素が存在する前に呼び出している（Reactのeffect内など、描画後に実行してください）、要素がdisplay: noneになっている、またはすでに完全に見えている要素にnearestオプションを使っている、のいずれかです。
idで要素を探し、その上端を表示領域の上端に合わせます。
1つのルールで、スクリプトによるスクロールと#idで終わるリンクの両方の重なりを修正します。メディアクエリにより、動きを減らしたい人にはアニメーションを省きます。
centerはフィールドとそのラベルを画面中央に保ち、focusでキーボード利用者もそこへ移動します。
パネル内での項目の位置を使うので、周囲のページは動きません。
refは描画後にDOMノードを指すので、呼び出しはクリックハンドラーかeffect内で行います。
scrollIntoViewプレイグラウンド
このボックスには独自の固定バーがあります。行とオプションを選んでスクロールしてください。ボックスはscrollToで同じ位置合わせの計算を行うので、ページの他の部分は動きません。
ターゲットの行：{n}
scroll-margin-top: {n}px
スクロール
ボックスの先頭に戻る
固定バー、高さ40px
行 {n}
デモ用スクロールボックス
ページ用のコード
無料で始める · クレジットカード不要