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

Czas czytania: 2 minut

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://www.aurainweb.pl/wp-content/uploads/2013/02/wordpress-api-e1372490516916.jpg"></a>
    <a href="#section2"><img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576.jpg"></a>
    <a href="#section3"><img src="https://www.aurainweb.pl/wp-content/uploads/2013/02/wordpress-api-e1372490516916.jpg"></a>
    <a href="#section4"><img src="https://www.aurainweb.pl/wp-content/uploads/2012/10/p16n77hn8u1ja815oc1ev51hcjtsf3.medium.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.0

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 „_”)

8 thoughts on “Odsyłacze i etykiety na stronie internetowej – kotwice na stronie HTML

  1. Witaj,
    pokażesz mi przykłada jak zrobić taki odsyłacz z obrazka do sekcji strony? Robię menu obrazkowe składające się z 6 ikon i chcę, żeby każda prowadziła do osobnej sekcji strony.

  2. A w jaki sposób do witryny jednostronnej z kotwicami w menu dodac kolejne podstrony tak żeby menu działało z podstrony na kotwicę? Dokładnie chodzi mi mi o strone one page i dodatkowe podstrony. jak z podstrony wrócić na dana kotwicę.

    1. Możesz spróbować zmodyfikować odnośniki w swoim menu

      Jeśli masz odnośnik do innej strony:
      <a href=”strona-2.html”> Strona druga</a>

      Po kliknięciu w taki link strona otworzy się u góry strony.

      Jeżeli chcesz przenieść się w kreślone miejsce strony modyfikujemy go:
      <a href=”strona-2.html#odnosnik”> Strona druga<//a>

      W przypadku strony głównej (jeżeli znajduje się na głównej domenie) wystarczy:
      <a href=”/#odnośnik”> Strona druga</a>

      Przykład:
      http://www.radiojachting.pl/WC/formularz.php

      1. Dzięki za sugestie ale nie o to chodzi. moja strona to ateliermlodosci.pl jest jako jednostronicowa ale…. w zakładce zabiegi można wejść w każdy zabieg i przeczytać o nim. Ale nie ma możliwości powrotu do zakładki zabiegi tylko do HOME. Strona na wordpresie .

          1. Działa wielkie dzięki próbowałam Home/#portfolio i nie zadziałao ale o samym /#portfolio juz nie :)))) jeszcze raz dzięki

Comments are closed.