Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Danh sách neo

Dùng cho một trang dài nhiều mục, để người ta nhảy thẳng từ đầu trang tới phần cần đọc.

Điều hướng

Xem trước trực tiếp

Nguồn

<nav class="dc-anchors" aria-labelledby="dc-anchors-h">
  <h2 class="dc-anchors__title" id="dc-anchors-h">이 페이지에서 바로 가기</h2>
  <ol class="dc-anchors__list">
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a1"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>신청 자격</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a2"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>준비할 서류</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a3"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>신청하는 곳과 기간</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a4"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>받는 금액과 지급일</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a5"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>자주 묻는 질문</a></li>
  </ol>
</nav>
.dc-anchors { max-width:420px; padding:var(--dc-4); border:1px solid var(--dc-line); border-left:3px solid var(--dc-brand); border-radius:0 var(--dc-r-md) var(--dc-r-md) 0; background:var(--dc-surface); font-family:var(--dc-font); }
.dc-anchors__title { margin:0 0 var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-text); }
.dc-anchors__list { margin:0; padding:0; list-style:none; }
.dc-anchors__item { margin:0; border-top:1px solid var(--dc-line); }
.dc-anchors__item:first-child { border-top:0; }
.dc-anchors__link { display:flex; align-items:center; gap:var(--dc-2); min-height:40px; padding:var(--dc-2) 0; color:var(--dc-brand-text); font-size:14px; text-decoration:underline; text-decoration-thickness:1px; }
.dc-anchors__link:hover { color:var(--dc-text); }
.dc-anchors__arrow { flex:0 0 auto; font-size:12px; line-height:1; color:var(--dc-text-mute); }
.dc-anchors__row { display:flex; flex-wrap:wrap; gap:var(--dc-2); margin:0; padding:0; list-style:none; }
.dc-anchors__chip { display:inline-flex; align-items:center; min-height:36px; padding:var(--dc-1) var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text); font-size:13px; text-decoration:none; }
.dc-anchors__chip:hover { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-anchors__index { display:flex; flex-wrap:wrap; gap:var(--dc-1); margin:0; padding:0; list-style:none; }
.dc-anchors__letter { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:0 var(--dc-1); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-brand-text); font-size:14px; font-weight:700; text-decoration:none; }
.dc-anchors__letter:hover { border-color:var(--dc-brand); background:var(--dc-brand-soft); }
.dc-anchors__letter.is-empty { border-style:dashed; background:var(--dc-sunken); color:var(--dc-text-mute); font-weight:400; }

Cách dùng

  • Đặt trước phần nội dung và giới hạn bốn đến tám mục; khác mục lục, nó không chạy theo người đọc
  • Viết mỗi mục giống y tiêu đề mà nó nhảy tới, nếu khác thì đến rồi vẫn thấy lạ
  • Cho tiêu đề đích thuộc tính scroll-margin-top để header dán không che mất

Điểm cần lưu ý

  • Ẩn mũi tên bằng aria-hidden — đó là trang trí, không phải nội dung để đọc
  • Đừng phân biệt link chỉ bằng màu; thêm gạch chân hoặc viền

Tiếp theo