🔍앵커 기반 스크롤의 주소 문제 해결하기

안녕하세요 웹 YB 임지수입니다!

이번 1주차 과제를 하면서 생긴 의문을 해결하고 싶어 찾아보다가 관련 내용을 정리해 보았습니다.

 

 

 

위 영상에서 각 메뉴를 클릭할 때마다 #all, #soong, #food 가 주소 뒤에 붙는 거 보이시나요?

깔끔한 URL을 유지하고 싶었는데 은근히 거슬리더라구요ㅎㅎ😅 

 

저는 스크롤 이동을 위해 HTML의 href="#id" 형식을 사용했는데 이 방식 때문에 메뉴 클릭 시 해당 id가 URL 뒤에 그대로 드러나는 현상이 생겼습니다..

 

그래서 혹시 JavaScript 없이 HTML/CSS만으로 이 문제를 해결할 수는 없을까? 싶었지만...

 

결론부터 말씀드리자면 HTML/CSS만으로 주소창에서 #id 값을 숨기는 방법은 찾지 못했습니다🤯

결국 이 문제를 해결하기 위해서는 JavaScript의 개입이 불가피하다는 결론에 도달하게 되었습니다!

 

 

 

❓ 이유는 뭘까요?

HTML의 <a href="#id"> 형식은 브라우저의 기본 동작입니다.

→ 클릭하면 해당 id로 스크롤 이동

→ 주소창에 #id가 붙는다

이건 브라우저가 내부적으로 처리하는 동작이라 CSS로는 제거할 수가 없습니다.

즉, #id가 붙는 건 자연스러운 동작이고 우리가 별도로 막지 않으면 계속 붙게 됩니다.

 

 

 

💡 그럼 어떻게 해결할까요?

👉 preventDefault() + scrollIntoView() + history.replaceState() 사용하기!

<!-- 메뉴 -->
<section class="navigation">
  <div class="menu-title">메뉴</div>
     <ul class="menu-list">
        <li><a href="#all" data-target="all">전체</a></li>
        <li><a href="#soong" data-target="soong">숭이들</a></li>
        <li><a href="#food" data-target="food">음식</a></li>
     </ul>
</section>

<!-- ... -->

<section id="all" class="box-section"></section>
<section id="soong" class="box-section"></section>
<section id="food" class="box-section"></section>

<!-- ... -->

<script>
   document.querySelectorAll(".menu-list a").forEach((link) => {
     link.addEventListener("click", function (e) {
       e.preventDefault();
       const targetId = this.dataset.target;
       const targetElement = document.getElementById(targetId);
       if (targetElement) {
         targetElement.scrollIntoView({ behavior: "smooth" });
         window.history.replaceState(null, "", window.location.pathname);
       }
     });
   });
</script>

 

 

 

📍 각각의 역할을 살펴보면

preventDefault()

링크 클릭 시 기본 이동 동작을 막아줍니다.

페이지가 순간 이동하거나 주소에 #id가 붙는 것을 방지할 수 있습니다.

 

scrollIntoView()

JavaScript로 특정 요소의 위치로 부드럽게 스크롤 이동시켜 줍니다.

사용자에게 더 자연스러운 스크롤 경험을 제공합니다.

 

history.replaceState()

주소창에 붙은 #id 해시 값을 제거하거나 변경할 때 사용합니다.
특히 브라우저 히스토리에 기록을 남기지 않기 때문에 뒤로 가기 버튼을 눌렀을 때도 깔끔하게 동작합니다.

 

 

 

📢 정리하면!

• preventDefault() → 기본 동작 막기
• scrollIntoView() → 자연스러운 스크롤 이동
• history.replaceState() → 주소창에 해시(#) 제거

 

이 세 가지를 조합하면 스크롤 이동은 그대로 유지하면서도 주소창은 깔끔하게 유지할 수 있습니다!

 

 

 

✨ 결과 화면

 

이제 주소 뒤에 #id 값이 안 붙는 거 보이시나요!!!

JS를 사용해서 해결한 거긴 하지만 깔끔해진 URL을 보게 돼서 만족스럽네요😄😄