បញ្ជីយុថ្កា

សម្រាប់ទំព័រវែងមួយដែលមានផ្នែកច្រើន ដើម្បីឲ្យគេលោតពីខាងលើទៅផ្នែកដែលត្រូវការភ្លាម។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<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; }

របៀបប្រើ

ដាក់នៅមុនអត្ថបទ ហើយកំណត់ត្រឹមបួនដល់ប្រាំបីធាតុ; ខុសពីមាតិកា វាមិនដើរតាមអ្នកអានទេ
សរសេរធាតុនីមួយៗដូចចំណងជើងដែលវាលោតទៅ បើខុសគេមកដល់ហើយនឹងងឿងឆ្ងល់
ដាក់ scroll-margin-top លើចំណងជើងគោលដៅ ដើម្បីកុំឲ្យក្បាលទំព័របាំង

ចំណុចត្រូវប្រុងប្រយ័ត្ន

បិទបាំងរូបព្រួញដោយ aria-hidden — វាគ្រាន់តែជាការតុបតែង មិនមែនសម្រាប់អាន
មិនត្រូវបែងចែកតំណដោយពណ៌តែម្នាក់ឯង សូមបន្ថែមបន្ទាត់ក្រោមឬស៊ុម

បន្ទាប់

ក្បាលទំព័រ ការរុករក វេប

មឺនុយទម្លាក់ ការរុករក វេប

ផ្លូវនាំ breadcrumb ការរុករក វេប

ការបែងចែកទំព័រ ការរុករក វេប