Odsyłacze i etykiety na stronie internetowej – kotwice na stronie HTML

Kotwice ang. anchor (etykiety, zakładki) służą do oznaczenia specjalnych obszarów podobnie jak zakładka w książce. Odsyłacz (nazywane również odnośnikami, hiperłączami) prowadzi do kotwicy (konkretnego fragmentu tekstu, strony).

Dzięki zastosowaniu kotwic oraz odsyłaczy do nich prowadzących możliwe jest np. tworzenie stron typu „one page”, udostępnianie na stronie odnośników do powiązanych artykułów.

Przykładowy szablon z kotwicami i odsyłaczami

Poniżej zamieściłam przykładowe zastosowanie kotwic i odsyłaczy.

See the Pen scroll-behavior CSS by Aura (@Julka85) on CodePen.

Jak wygląda kotwica i odsyłacz

Przykładowy odsyłacz:

<a href="#nazwa-etykiety">Przejdź do kotwicy</a>

Przykładowy odsyłacz

Odsyłacz składa się np. „nazwa-etykiety” oraz poprzedzającego ją symbolu #.

Przykładowa kotwica

<h2><a name="nazwa-etykiety">Kotwica</a></h2>
<p>Fragmęt do którego prowadzi odsyłacz</p>

Lub w HTML5

W HTML5 kotwice tworzymy już trochę inaczej zamieniając „name” na „id”

<h2><a id="nazwa-etykiety">Kotwica</a></h2>
<p>Fragmęt do którego prowadzi odsyłacz</p>

Jak widać kotwice czyli docelowe miejsca możemy tworzyć na różne sposoby.

Nazwa etykiety odsyłacza musi być taka sama jak nazwa kotwicy tylko wtedy skrypt zacznie działać. Nazwą etykiety może być praktycznie dowolne słowo.

Tutaj cię przeniesie
Jak widać na poniższym przykładzie docelowy link w cale nie musi wyglądać jak link:

Jak to działa

W odnośnik „href” zawiera wartość, link np.:

#nazwa-etykiety

Zasada jest podobna jak przy zwykłych linkach np. w menu strony. Po kliknięciu element zawierający go nazwa ta dopisze się on na końcu adresu naszej strony internetowej (lub też nie jeśli skorzystamy z kodu javascript). Następnie sprawdzi czy na stronie nie znajduje się obszar posiadający taki sam znacznik tylko bez „#”. Po czym przeniesie nas do niego. W podstawowej wersji (o ile taki punkt istniej) po kliknięciu zostaniemy natychmiastowo przeniesieni do właściwej lokalizacji.

Kotwice i odsyłacze są obecnie bardzo popularne. Spotkać je można praktycznie na wszystkich nowoczesnych stronach internetowych.

W większości przypadków są one jednak rozbudowane o kod JavaScript (jQuery) dzięki czemu przesuwanie pomiędzy punktami jest np. bardziej płynne co ułatwia poruszanie się pomiędzy poszczególnymi działami strony.

Efekt ten spotykany jest szczególnie na stronach typu One Page.

---

Działający przykład kotwic

Poniżej zamieściłam link do przykładowej prostej strony z działającymi odsyłaczami i etykietami.

Demo bez animacji

Kod przedstawia się następująco:
Sekcja menu składająca się z kilku obrazków:

<div class="obrazek">
    <a href="#section1"><img src="https://aurainweb.pl/wp-content/uploads/2013/02/wordpress-api-e1372490516916-1.jpg"></a>
    <a href="#section2"><img src="https://aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg"></a>
    <a href="#section3"><img src="https://aurainweb.pl/wp-content/uploads/2013/02/wordpress-api-e1372490516916-1.jpg"></a>
    <a href="#section4"><img src="https://aurainweb.pl/wp-content/uploads/2012/10/p16n77hn8u1ja815oc1ev51hcjtsf3.medium-1.jpg"></a>
</div>

Powyższe odnośniki odnoszą się do poniższego kodu:

<div id="section1" class="section">
Pierwszy<br>
Lorem ipsum dolor sit amet, consectetur ...

</div>

<div id="section2" class="section">
Link z onrazka<br>
Lorem ipsum dolor sit amet, consectetur adipiscing ...
</div>
<div id="section3" class="section">
Wordpress<br>
Lorem ipsum dolor sit amet, consectetur adipiscing ..

</div>

<div  id="section4" class="section">
Google image<br>
Lorem ipsum dolor sit amet, consectetur ...

</div>

Kod nie jest zbyt skomplikowany a do jego ułożenia użyłam:

.obrazek{
        margin: 0 auto;
        display: block;
        width: 800px;
        position: fixed;
        left: 0;    
        right: 0;
        top:0;
    }
    .obrazek a img{
        height: 100px;
        width: auto;
    }
    .section{
        max-width: 800px;
        width: 100%;
        padding: 10% 0;
        margin: 0 auto;
    }

Tak jak zaznaczyłam stronka pozbawiona jest animacji w postaci płynnego przewijania – jest jednak dobrym przykładem działania.

---

Z zaznaczeniem nagłówka

Poniżej umieściłam wam przykład skrolowania z zmianą koloru nagłówka sekcji w którą wybraliśmy z menu. W praktyce polega to na tym, że kiedy klikniemy w obrazek zostaniemy płynnie przesunięci do sekcji w której nagłówek zmieni kolor na czerwony.

See the Pen Untitled by Aura (@Julka85) on CodePen.

O czym należy Pamiętać!

Uwaga: przy tworzeniu kotwic i etykiet nie należy używać

• polskich znaków typy: ą, ć, ę, ł, ń… itd.
• wielkich liter
• znaków takich jak np.: \ / : * ? ” < > |
• spacji (jeśli już musisz, skorzystaj z podkreślnika „_”)