scrollIntoView

scrollIntoView()は、特定の要素が画面内（ビューポート）に見えるように自動スクロールさせるための DOM メソッドです。

h1 要素をテキストを取得し、ページ内リンクのリストを作成して、ページ内リンクの機能を Javascript で作成します。

サンプルページ

以下は、scrollIntoView（）のオプションです。

オプション	値	意味
behavior	'auto'（デフォルト） 'smooth'	スクロールを即時か滑らかにするか
block	'start'（デフォルト） 'center' 'end' 'nearest'	縦方向での表示位置
inline	'start' 'center' 'end' 'nearest'	横方向での表示位置

Javascript

window.addEventListener('load', () => {
  const elements = document.querySelectorAll('.scroll_target');
  const nav = document.getElementById('list')

  function inPageScrooling(elements, nav){
    let ul_ele = document.createElement("ul");

    for(let el of elements) {
      let li_ele = document.createElement("li");
      li_ele.appendChild(document.createTextNode(el.textContent))
      ul_ele.appendChild(li_ele)
      
    }
    console.log(ul_ele)
    nav.appendChild(ul_ele)
  }

  function scrollToElementWithText(elements, text) {
    for (let el of elements) {
      el.style.backgroundColor = 'white';
    }
    for (let el of elements) {
      if (el.textContent.includes(text)) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        el.style.backgroundColor = 'yellow';
        break; // 最初に見つけた要素だけスクロール
      }
    }
  }

  inPageScrooling(elements, nav)

  let lists = document.querySelectorAll('#list li');
  console.log(lists)
  lists.forEach((list) => {
    list.addEventListener('click', function(e){
      let text = e.target.innerText;
      scrollToElementWithText(elements, text);
    })
  })
})

以下の javascript は、機能は同じですが Javascript をクラスにしたものです。

クラスを使用

class ScrollNavigator {
  constructor(targetSelector, navContainerId) {
    this.elements = document.querySelectorAll(targetSelector);
    this.navContainer = document.getElementById(navContainerId);
    this.init();
  }

  // 自作の関数。関数名は任意でつけてOK。「 setup() や start() 」などわかりやすいものでOK
  init() {
    this.createNavList();
    this.attachNavClickEvents();
  }

  createNavList() {
    const ul = document.createElement('ul');

    this.elements.forEach((el) => {
      const li = document.createElement('li');
      li.textContent = el.textContent;
      ul.appendChild(li);
    });

    this.navContainer.appendChild(ul);
  }

  scrollToElementWithText(text) {
    for (let el of this.elements) {
      if (el.textContent.includes(text)) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        el.style.backgroundColor = 'yellow';
        break;
      }
    }
  }

  attachNavClickEvents() {
    const listItems = this.navContainer.querySelectorAll('li');

    listItems.forEach((item) => {
      item.addEventListener('click', (e) => {
        const text = e.target.innerText;
        this.scrollToElementWithText(text);
      });
    });
  }
}

window.addEventListener('load', () => {
  new ScrollNavigator('.scroll_target', 'list');
});