Components - Anchor

comment

  • 기본 구조: .js-anchor 클래스를 사용하여 앵커 네비게이션 구성
  • 앵커 아이템: .js-anchor__item 클래스를 가진 요소 안에 링크(<a>)를 배치하며, href 속성으로 타겟 섹션의 ID 지정 (예: href="#section-01")
  • 타겟 섹션: 앵커 링크가 가리키는 섹션에는 id 속성을 부여 (예: id="section-01")
  • 스무스 스크롤: 앵커 링크 클릭 시 타겟 섹션으로 스무스 스크롤 자동 실행
  • 자동 하이라이트: 스크롤 위치에 따라 현재 보이는 섹션의 앵커 링크에 자동으로 is-active 클래스 추가
  • 스크롤 오프셋: data-scroll-offset 속성으로 스크롤 위치 조정 (기본값: 0, 고정 헤더가 있는 경우 헤더 높이만큼 설정)
  • 스크롤 시간: data-scroll-duration 속성으로 스무스 스크롤 애니메이션 시간 설정 (기본값: 500ms)
  • 자동 하이라이트 비활성화: data-auto-highlight="false" 속성으로 스크롤 시 자동 하이라이트 기능 비활성화 가능
  • 활성 상태: 활성화된 앵커 링크와 부모 요소(.js-anchor__item)에 is-active 클래스 자동 추가
  • ARIA 속성: role="navigation", aria-label, aria-current 속성 자동 관리
  • 커스텀 이벤트: 앵커 변경 시 anchor:change 이벤트 발생 (이벤트 디테일에 targetId, link 정보 포함)
  • JavaScript 초기화: 페이지 로드 시 initAnchors() 함수가 자동으로 호출되어 모든 .js-anchor 요소 초기화
Anchor - 기본

HTML 구조

<!-- 앵커 네비게이션 -->
<nav class="js-anchor">
  <ul class="anchor-list">
    <li class="anchor-list__item js-anchor__item">
      <a class="anchor-list__link" href="#section-01">섹션 1</a>
    </li>
    <li class="anchor-list__item js-anchor__item">
      <a class="anchor-list__link" href="#section-02">섹션 2</a>
    </li>
    <li class="anchor-list__item js-anchor__item">
      <a class="anchor-list__link" href="#section-03">섹션 3</a>
    </li>
  </ul>
</nav>

<!-- 타겟 섹션들 -->
<section id="section-01">
  <h3>섹션 1</h3>
  <p>섹션 1 콘텐츠</p>
</section>
<section id="section-02">
  <h3>섹션 2</h3>
  <p>섹션 2 콘텐츠</p>
</section>
<section id="section-03">
  <h3>섹션 3</h3>
  <p>섹션 3 콘텐츠</p>
</section>
Anchor - 옵션 설정

HTML 구조

<nav class="js-anchor" data-scroll-offset="80" data-scroll-duration="800">
  <ul class="anchor-list">
    <li class="anchor-list__item js-anchor__item">
      <a class="anchor-list__link" href="#section-01">섹션 1</a>
    </li>
  </ul>
</nav>

옵션 설명:

  • data-scroll-offset: 스크롤 위치 오프셋 (픽셀 단위, 기본값: 0) - 고정 헤더가 있는 경우 헤더 높이만큼 설정
  • data-scroll-duration: 스크롤 애니메이션 시간 (밀리초, 기본값: 500)
  • data-auto-highlight: 스크롤 시 자동 하이라이트 활성화 여부 (기본값: true, 비활성화하려면 "false" 설정)
Anchor - 그리드 레이아웃

HTML 구조

<ol class="anchor-list anchor-list--grid js-anchor">
  <li class="anchor-list__item js-anchor__item">
    <a class="anchor-list__link" href="#section-01">제1조 (목적)</a>
  </li>
  <li class="anchor-list__item js-anchor__item">
    <a class="anchor-list__link" href="#section-02">제2조 (용어의 정의)</a>
  </li>
  <li class="anchor-list__item js-anchor__item">
    <a class="anchor-list__link" href="#section-03">제3조 (약관의 명시와 개정)</a>
  </li>
</ol>

그리드 레이아웃:

  • anchor-list--grid 클래스를 추가하면 앵커 목록이 그리드 레이아웃으로 표시됨
  • 약관, 이용정책 등 여러 섹션을 한눈에 보여줄 때 유용함
Anchor - 커스텀 이벤트

JavaScript 이벤트 리스닝

// anchor:change 이벤트 리스닝
const anchorContainer = document.querySelector('.js-anchor');

anchorContainer.addEventListener('anchor:change', (event) => {
  const { targetId, link } = event.detail;

  console.log('앵커 변경:', targetId);
  console.log('활성 링크:', link);

  // 비즈니스 로직 처리
  // 예: 분석 이벤트 전송, UI 업데이트 등
});

이벤트 상세 정보 (event.detail):

  • anchorContainer: 앵커 컨테이너 요소
  • targetId: 타겟 섹션의 ID (예: "section-01")
  • link: 활성화된 앵커 링크 요소
Anchor - 동적 초기화/해제

JavaScript API

// 전체 앵커 초기화
import { initAnchors } from '@/assets/modules/anchor/_anchor.js';
initAnchors();

// 특정 범위 내 앵커 초기화
initAnchors('#modal-content');

// 앵커 해제
import { destroyAnchors } from '@/assets/modules/anchor/_anchor.js';
destroyAnchors();

// 특정 범위 내 앵커 해제
destroyAnchors('#modal-content');

사용 시나리오:

  • 모달 내 앵커 네비게이션을 동적으로 초기화/해제할 때
  • SPA에서 페이지 전환 시 앵커를 재초기화할 때
  • AJAX로 콘텐츠를 로드한 후 앵커를 초기화할 때