문제해결 : hash값 받아서 scroll 조정하기

상황

 A 페이지에서 a태그 여러개에 링크를 걸어서 누르면 B페이지의 각각 다른 위치로 연결되게 하려고 한다. (여기서 A페이지와 B페이지는 각기 다른 HTML이다.)

A페이지

<div class="link">
    <a href="../folder/text.html#content01">제목1</a>
    <a href="../folder/text.html#content02">제목2</a>
    <a href="../folder/text.html#content03">제목3</a>
    <a href="../folder/text.html#content04">제목4</a>
	...
</div>

B페이지

<h4 id="content01">컨텐츠 제목 1</h4>
<div>컨텐츠 ...</div>
<h4 id="content02">컨텐츠 제목 2</h4>
<div>컨텐츠 ...</div>
<h4 id="content03">컨텐츠 제목 3</h4>
<div>컨텐츠 ...</div>
<h4 id="content04">컨텐츠 제목 4</h4>
<div>컨텐츠 ...</div>
<h4 id="content05">컨텐츠 제목 5</h4>
<div>컨텐츠 ...</div>
...

---

문제

항상 상단에 css가 fixed로 고정되는 header가 있어서 링크로 이동했을 시 원하는 정확한 위치의 처음부터 보이지 않고 중간부터 보이는 현상이 있었다.

---

조건

A페이지에서 a태그를 누르면 B페이지의 해당 해시아이디를 가진 h4가 header 바로 아래 오도록 스크롤이 이동되어야 한다.

---

해결

B페이지에서 아래 코드를 실행시켜주었다.

// URL의 해시값이 변경될 때마다 스크롤 위치 조정
window.addEventListener("hashchange", function() {
  var hash = location.hash;
  if (hash !== "") {
    var target = document.querySelector(hash);
    if (target) {
      var headerHeight = document.querySelector("header").offsetHeight;
      var targetPosition = target.getBoundingClientRect().top;
      window.scrollTo({
        top: targetPosition + window.pageYOffset - headerHeight - 100,
        behavior: "smooth"
      });
    }
  }
});

// 초기 로딩 시 URL의 해시값에 따라 스크롤 위치 조정
window.addEventListener("load", function() {
  var hash = location.hash;
  if (hash !== "") {
    var target = document.querySelector(hash);
    if (target) {
      var headerHeight = document.querySelector("header").offsetHeight;
      var targetPosition = target.getBoundingClientRect().top;
      window.scrollTo({
        top: targetPosition + window.pageYOffset - headerHeight - 100,
        behavior: "auto"
      });
    }
  }
});

해당 코드는 페이지 로딩 시 브라우저의 URL에서 해시값을 추출하고, 해당 해시값을 가진 요소가 있는지 찾는다. 그리고 해당 요소의 위치를 계산하여 스크롤 위치를 조정한다.
또한, URL의 해시값이 변경될 때마다 스크롤 위치를 조정하도록 이벤트 리스너를 등록했다.