HTML Academy · Oppitunti

Linkittäminen osioihin: fragmenttitunnisteet

Siirry sivun osioihin id-attribuuttien ja hash-linkkien avulla.

Oppitunti 4/413 vaihetta

Linkittäminen osioihin: fragmenttitunnisteet on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on fragmenttitunniste

Fragmenttitunniste on URL-osoitteen osa, joka seuraa #-merkkiä:

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

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

Ankkurikohteiden luominen id-attribuutilla

Voitte linkittää osioon antamalla sille id-attribuutin:

<!-- 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>

Linkittäminen toiselta sivulta

Voitte linkittää toisella sivulla olevaan osioon:

<!-- 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>

id-nimeämissäännöt

Kelvollisten id-arvojen säännöt:

Arvon on oltava sivulla yksilöllinen — kahdella elementillä ei voi olla samaa id-arvoa
Arvo ei voi CSS:ssä alkaa numerolla, vaikka se on kelvollinen HTML:ssä
Älkää käyttäkö välilyöntejä — käyttäkää yhdysmerkkejä: my-section
Kirjainkoko merkitsee: #FAQ ja #faq ovat eri arvoja

Sisällysluettelomalli

Fragmenttilinkkien avulla sivulle voidaan luoda sisällysluetteloita:

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

Tasainen vieritys CSS:llä

Lisätkää fragmenttinavigointiin tasainen vieritys:

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

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

Vieritystilaa kiinteitä otsakkeita varten

Kiinteät navigointipalkit peittävät osiot, joihin vieritetään. Korjatkaa tämä käyttämällä scroll-margin-top-ominaisuutta:

/* 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 */

:target-CSS-pseudoluokka

Voitte tyylitellä parhaillaan kohteena olevan osion :target-pseudoluokan avulla:

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

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

Linkki sivun alkuun

Yleinen toteutustapa — sivun alkuun vievä fragmenttia käyttävä linkki:

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

Fragmentit ja selaimen historia

Fragmenttinavigointi lisää merkintöjä selaimen historiaan:

Fragmenttilinkin napsauttaminen lisää historiatiedon
Selaimen Takaisin-painike palauttaa edellisen vierityskohdan
Tämä on normaalia toimintaa — SPA-sovellukset voivat muokata sitä pushState-menetelmällä

Nimetyt ankkurit (vanha tapa)

Ennen id-attribuutteja ankkureissa käytettiin rakennetta <a name> — nykyään se on vanhentunut:

<!-- 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 -->

Pikatarkistus

Mikä CSS-ominaisuus estää kiinteää navigointipalkkia peittämästä osiota, johon on vieritetty?

Vastaa interaktiivisessa oppitunnissa

Kertaus: fragmenttitunnisteet

Fragmenttilinkkien perusteet:

#id href-attribuutissa vierittää elementtiin, jolla on kyseinen id
Jokaisella kohde-elementillä on oltava yksilöllinen id-attribuutti
Toimii sekä samalla sivulla että toisilta sivuilta
scroll-behavior: smooth mahdollistaa animoidun vierityksen
scroll-margin-top estää kiinteän otsakkeen peittämästä sisältöä
:target-pseudoluokka korostaa nykyisen osion

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Linkittäminen osioihin: fragmenttitunnisteet” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Linkittäminen osioihin: fragmenttitunnisteet”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Linkittäminen osioihin: fragmenttitunnisteet”?

Siirry sivun osioihin id-attribuuttien ja hash-linkkien avulla. Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Linkittäminen osioihin: fragmenttitunnisteet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

anchor-elementti ja href-attribuutti
Absoluuttiset ja suhteelliset URL-osoitteet
Linkkien avaaminen uusissa välilehdissä ja download-attribuutti
Linkittäminen osioihin: fragmenttitunnisteet

← Takaisin: HTML Academy