要素をフォーカスした時、その要素をスクロールして表示する

<button id="scroll">スクロール</button>
<button id="nonScroll">スクロールなし</button>
<p></p>
<textarea name="" id="focused" cols="30" rows="10" style="margin-top: 100vh;"></textarea>
<button id="scrollTop">戻る</button>

const scrollButton = document.getElementById("scroll");
const nonScrollButton = document.getElementById("nonScroll");
const focusedButton = document.getElementById("focused");
const scrollTopButton = document.getElementById("scrollTop");

// デフォルト：スクロールあり
scrollButton.addEventListener("click", () => {
  focusedButton.focus();
});

nonScrollButton.addEventListener("click", () => {
  focusedButton.focus({
    preventScroll: true
  });
});

scrollTopButton.addEventListener("click", () => {
  window.scrollTo(0, 0);
});

element.focus({preventScroll:Boolean});
true ⇒ スクロールなし
false(デフォルト) ⇒ 要素をスクロールして表示する