特定のセクションにスクロール
2731 ワード

ナビゲーションバーの各領域をクリックすると、該当する下の領域にスクロールします.
たとえば、「スキル」をクリックした場合は、次のスノーボード領域にスクロールする必要があります.

指定された長さでスクロールせずに、正確に領域にスクロールする方法はありませんか?
🔮 element.scrollIntoView


対応するelementにスクロールできるようです.
const $menuContact = document.querySelector(".menu--contact");
const $contact = document.querySelector(".contact");
$menuContact.addEventListener("click",scrollToContact);
function scrollToContact(){
$contact.scrollIntoView()
}
ナビゲーションバーの[接触](Contact)をクリックすると、下部の接触領域まで下がります.
直接接触領域に移動して、切れたような気がします.
優しく転がってもいいですか?
🧿behavior

scrollIntoViewのパラメータ動作はアニメーションを定義します.
デフォルトではautoに設定され、スムーズに変わります.
🔮 結果

Reference
https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView
Reference
この問題について(特定のセクションにスクロール), 我々は、より多くの情報をここで見つけました https://velog.io/@gygy/특정-섹션으로-스크롤-하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol