メニューバーの項目を押すと特定の位置までスクロールする

Question

メニューバーの項目を押すことで特定の場所へスクロールする動作を実装しようとしています。

下記がJavascriptとHTMLです。

//指定場所まで移動
const menu = document.querySelectorAll(".menu");
const header = document.querySelector("header").getBoundingClientRect().top;
const about = document.getElementById("about_position").getBoundingClientRect().top;
const courses = document.getElementById("courses_position").getBoundingClientRect().top;
const support = document.getElementById("support_position").getBoundingClientRect().top;
const voices = document.getElementById("voices_position").getBoundingClientRect().top;
const faq = document.getElementById("faq_position").getBoundingClientRect().top;

for (let i = 0; i < menu.length; i++) {
  menu[i].addEventListener("click", () => {
      if(menu[i].classList.contains("position1")){
        window.scrollTo({
            top:about - 50,
            behavior:"smooth"
            });
        }
        if(menu[i].classList.contains("position2")){
            window.scrollTo({
                top:courses - 100,
                behavior:"smooth"
            });
        }
        if(menu[i].classList.contains("position3")){
            window.scrollTo({
                top:support - 100,
                behavior:"smooth"
            });
        }
        if(menu[i].classList.contains("position4")){
            window.scrollTo({
                top:voices + 200,
                behavior:"smooth"
            });
        }
        if(menu[i].classList.contains("position5")){
            window.scrollTo({
                top:faq + 150,
                behavior:"smooth"
            })
        }
    })
}

            <li class="menu position1"><p>about</p></li>
            <li class="menu position2"><p>COURSES</p></li>
            <li class="menu position3"><p>SUPPORT</p></li>
            <li class="menu position4"><p>VOICES</p></li>
            <li class="menu position5"><p>FAQ</p></li>

該当するclassを押すことでscrollToが動作してscrollをすることができます。

しかし問題はページの途中で再読み込みした場合です。

getBoundingClientRect().top;で取得しているためスクロール値が一番上の状態のときの位置を取得します。

例えば、const about = document.getElementById("about_position").getBoundingClientRect().top;なら780です。

しかし途中で再読み込みすると780の値は当然変わります。

その場合メニューバーの項目を押すと対象要素へのスクロールがズレます。

実現したいこと

・一番上ではない場所（中断や下段）から再読み込みしてもズレることなく対象へスクロールしたい

---

画像でも一度ご覧ください。

スクロール値が一番上のためメニューバーを押しても正常に動作する。
しかし2枚の場所で再読み込みしてメニューバーを押しても正常に動作しない。

他の場所で途中から再読み込みしても正常に動作しません。

拙い説明で申し訳ありませんがよろしくお願いします。

Comments

[Yorrie]

pタグにhref属性は指定できません。pタグの中にaタグを入れ子にする形で記述しましょう。

あと、jQueryが使えるならもっと少ない行数で実現可能ですが、そのあたりの制約等ありますか？

[hiiro46]

修正依頼ありがとうございます！
現在はJavascriptを学習のためJavascriptでの実現を希望です。
よろしくお願いします。

Answer 1

itagagakiさんに回答を頂き実装できました。
ありがとうございました!!

//指定場所まで移動
let menu = document.querySelectorAll(".menu");
let about = document.getElementById("about_position");
let courses = document.getElementById("courses_position");
let support = document.getElementById("support_position");
let voices = document.getElementById("voices_position");
let faq = document.getElementById("faq_position");


for (let i = 0; i < menu.length; i++) {
  menu[i].addEventListener("click", () => {
      if(menu[i].classList.contains("position1")){
            about.scrollIntoView({behavior:"smooth"})
        }
        if(menu[i].classList.contains("position2")){
            courses.scrollIntoView({behavior:"smooth"})
        }
        if(menu[i].classList.contains("position3")){
            support.scrollIntoView({behavior:"smooth"});
        }
        if(menu[i].classList.contains("position4")){
           voices.scrollIntoView({behavior:"smooth",block:"center"});
        }
        if(menu[i].classList.contains("position5")){
            faq.scrollIntoView({behavior:"smooth"})
        }
    })
}

Answer 2

scrollIntoViewを使えばいいのでは。

Element.scrollIntoView() - Web API | MDN

たとえば

const voice = document.getElementById("voices_position");
voice.scrollIntoView();

Comments

[hiiro46]

itagagakiさん、回答ありがとうございました!
解決できました。
ありがとうございます!