0Pricing
HTML Academy · Lekcja

Odnośniki do sekcji i identyfikatory fragmentów

Przechodzić do sekcji strony za pomocą atrybutów id i odnośników z haszem.

Odnośniki do sekcji i identyfikatory fragmentów to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym jest identyfikator fragmentu?

Identyfikator fragmentu to część adresu URL znajdująca się za symbolem #:

https://example.com/page#section-3
                          │
                          └─ Fragment: "section-3"

<!-- The browser: -->
<!-- 1. Loads the page -->
<!-- 2. Scrolls to the element with id="section-3" -->

Tworzenie punktów docelowych kotwic za pomocą id

Aby utworzyć odnośnik do sekcji, nadaj jej atrybut id:

<!-- The target: give any element an id -->
<h2 id="installation">Installation</h2>
<h2 id="configuration">Configuration</h2>
<h2 id="faq">Frequently Asked Questions</h2>

<!-- The link: use # + id value -->
<a href="#installation">Jump to Installation</a>
<a href="#faq">Go to FAQ</a>

Odnośnik z innej strony

Można utworzyć odnośnik do sekcji znajdującej się na innej stronie:

<!-- From a different page -->
<a href="/docs/guide#installation">Installation Guide</a>
<!-- Loads /docs/guide and scrolls to #installation -->

<!-- Absolute URL to a section -->
<a href="https://example.com/docs#api">API Documentation</a>

Zasady nazewnictwa id

Zasady dotyczące poprawnych wartości id:

  • Muszą być unikatowe na stronie — żadne dwa elementy nie mogą mieć tego samego id
  • W CSS nie mogą zaczynać się od cyfry, choć w HTML jest to poprawne
  • Nie mogą zawierać spacji — należy używać łączników: my-section
  • Wielkość liter ma znaczenie: #FAQ i #faq to różne wartości

Wzorzec spisu treści

Odnośniki do fragmentów umożliwiają tworzenie spisów treści na stronie:

<nav aria-label="Table of Contents">
  <ol>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#setup">Setup</a></li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#api">API Reference</a></li>
  </ol>
</nav>

<h2 id="intro">Introduction</h2>
<h2 id="setup">Setup</h2>

Płynne przewijanie za pomocą CSS

Dodaj płynne przewijanie do nawigacji po fragmentach:

/* Apply to the entire page */
html {
  scroll-behavior: smooth;
}

/* Or for specific containers */
.scrollable {
  scroll-behavior: smooth;
}

Odstęp przy przewijaniu dla nieruchomych nagłówków

Nieruchome paski nawigacyjne zasłaniają przewijane sekcje. Można temu zapobiec za pomocą scroll-margin-top:

/* If you have a 60px fixed header */
:target {
  scroll-margin-top: 70px;
}

/* Or set globally for all headings */
h2, h3, h4 {
  scroll-margin-top: 70px;
}
/* scroll-margin-top offsets where the browser scrolls to */

Pseudo-klasa CSS :target

Stylizuj aktualnie wskazaną sekcję za pomocą :target:

/* Highlight the targeted section */
:target {
  background-color: #fff3cd;
  outline: 2px solid #ffc107;
  padding: 1rem;
}

<!-- Result: when user clicks #installation, -->
<!-- the installation section gets highlighted -->

Odnośnik powrotu na górę

Popularny wzorzec — odnośnik powrotu na górę za pomocą fragmentu:

<a href="#top" id="back-to-top">↑ Back to top</a>
<!-- Link to page top: either id="top" on body or use empty href # -->
<!-- Always give it meaningful text for accessibility -->

<!-- Position it fixed with CSS: -->
<!--
#back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}
-->

Fragmenty a historia przeglądarki

Nawigacja po fragmentach dodaje wpisy do historii przeglądarki:

  • Kliknięcie odnośnika do fragmentu dodaje wpis do historii
  • Przycisk Wstecz w przeglądarce powraca do poprzedniej pozycji przewijania
  • Jest to normalne zachowanie — aplikacje SPA mogą używać pushState do jego modyfikowania

Nazwane kotwice (starsze rozwiązanie)

Przed wprowadzeniem atrybutów id do kotwic używano <a name> — obecnie jest to przestarzałe rozwiązanie:

<!-- Old way (do not use): -->
<a name="section-1"></a>
<h2>Section 1</h2>

<!-- Modern way: -->
<h2 id="section-1">Section 1</h2>
<!-- Use id on the target element, not a separate anchor tag -->

Szybkie sprawdzenie

Jaka właściwość CSS zapobiega zasłanianiu przewiniętej sekcji przez nieruchomy pasek nawigacyjny?

Podsumowanie: identyfikatory fragmentów

Najważniejsze informacje o odnośnikach do fragmentów:

  • #id w href przewija stronę do elementu z tym id
  • Każdy element docelowy musi mieć unikatowy atrybut id
  • Działa zarówno na tej samej stronie, jak i z innych stron
  • scroll-behavior: smooth umożliwia animowane przewijanie
  • scroll-margin-top zapobiega zasłanianiu przez nieruchomy nagłówek
  • Pseudo-klasa :target służy do wyróżniania bieżącej sekcji

Często zadawane pytania

Czy lekcja „Odnośniki do sekcji i identyfikatory fragmentów” jest bezpłatna?

Tak — pełny tekst „Odnośniki do sekcji i identyfikatory fragmentów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Odnośniki do sekcji i identyfikatory fragmentów”?

Przechodzić do sekcji strony za pomocą atrybutów id i odnośników z haszem. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Odnośniki do sekcji i identyfikatory fragmentów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element anchor i atrybut href
  2. Adresy URL bezwzględne a względne
  3. Otwieranie odnośników w nowych kartach i atrybut download
  4. Odnośniki do sekcji i identyfikatory fragmentów
← Powrót do HTML Academy