Néhány szó az anchor használatáról

Írásainkat olyan, az informatika iránt érdeklődőknek szánjuk, akik egyelőre még szinte semmit vagy csak nagyon keveset tudnak az IT, weboldal készítés, internet, hálózatok, programozás, stb. világáról. Az általunk használt kifejezések és magyarázatok a nem szakmabelieknek szólnak. Cserébe közérthetően szeretnénk bemutatni az informatika különböző területeit és fogalmait.

***

Mi az az “anchor”?

Az angol anchor szó jelentése horgony. A számítástechnikában az anchor megoldást magyarul nevezhetjük oldalon belüli hivatkozásnak vagy ugróhivatkozásnak. Oké, tudjuk, elég viccesen hangzik, de végül is kifejező.
Segítségével a látogató könnyen és gyorsan a megnevezett helyre tud ugrani,  navigálni az oldalon belül - anélkül, hogy görgetne. Például egy weboldal alján elhelyezett "#top" anchor egy olyan horgony, amely lehetővé teszi az olvasó számára, hogy a linkre történő kattintással visszatérjen az oldal tetejére, ahelyett hogy vissza kelljen oda görgetnie.

Anchort akkor lehet célszerű használni, ha az adott oldal tartalma meglehetősen hosszú, de ennek ellenére nem szeretnénk több aloldalt létrehozni. Például egy hosszú, sok szakaszból álló blogbejegyzés esetén anchor segítségével úgy lehet prezentálni a tartalmat, hogy az olvasó könnyen megtalálja az oldalon belül azt a részt, amire kíváncsi.
Ilyenkor az oldal teteje környékén elhelyezünk egy navigációs panelt, ami tartalmazza a szakaszok címének listáját. Ezekre kattintva a böngésző automatikusan az oldalon belüli megfelelő szakaszra ugrik.

Az anchor tag használatának csúcsa a 90-es évek végétől a 2000-es évek elejéig terjedő időszakban volt. Ekkor volt a legnépszerűbb az egyszerű HTML alapú oldalak létrehozása, amelyek nagyban támaszkodtak az anchor tag használatára a hivatkozások és a navigáció megvalósításához. Ebben az időszakban az anchor tag kiemelten gyakori eszköz volt az oldalon belüli navigációhoz.

A 2000-es évek második felében és a 2010-es években a dinamikusabb, JavaScript alapú megoldások, mint például a jQuery, a React és az Angular keretrendszerek kezdtek elterjedni. Ezek lehetővé tették a fejlesztők számára, hogy finomabb, animált navigációt és oldalak közötti váltást valósítsanak meg anélkül, hogy az oldal teljes újratöltése lenne szükséges.

Ennek ellenére az anchor tag továbbra is széles körben használatos a weboldalakon, különösen az egyszerűbb oldalak esetében. A modern webfejlesztési gyakorlatok között azonban már kevésbé gyakori az anchor tag használata az oldalon belüli navigációhoz, mivel az újabb technológiák jobb lehetőségeket kínálnak a felhasználói élmény javítására. A jó UX (felhasználói élmény) tervezése során érdemes mérlegelni, hogy melyik megoldás illik legjobban az adott weboldal vagy alkalmazás céljaihoz és igényeihez.

Anchor és “sticky” menü Bootstrap keretrendszerben

Manapság a weboldalak tervezésekor gyakran használjuk a Bootstrap keretrendszert a reszponzív és jól kinéző dizájn megvalósításához. Azonban néha előfordulhat, hogy a Bootstrap “sticky” menüje eltakarja az oldal egyes szakaszainak címsorát, amikor az anchor tag segítségével rájuk ugrunk. (A sticky jelentése magyarul “ragadós”: ez azt jelenti, hogy a felső menüsor mindig látható marad.)

Ennek a fent említett eltakarásnak egyszerű oka van. Az anchor megoldással a hivatkozott szakasz a böngészőablak legtetején jelenik meg. Viszont a “sticky” menü “rálóg” a böngésző felső területére. Ez így UX-szempontból nyilván nem jó.
A lentiekben bemutatjuk, hogyan oldható meg ez a probléma egy egyszerű CSS megoldással.

Példahelyzet: Weboldal egy konferencia számára

Képzeljünk el egy weboldalt, amely egy konferencia információit tartalmazza. Az oldal több szakaszra oszlik, úgy mint: a program, a szervezők, az előadók és a helyszín. Szándékosan nem több oldalból áll a weboldal, hanem ún. “one page”, vagyis egyoldalas kis weboldalról van szó.

Probléma: Az anchor tag és a sticky menü együttes használata

Amikor a látogatók az oldalon lévő anchor linkekre kattintanak és az adott szakaszra ugranak, a sticky menü eltakarja a szakasz címsorát. Ez kifejezetten zavaró a felhasználók számára, mert így nem egyértelmű a tájékozódás, nem láthatják pontosan, melyik szakaszhoz navigáltak.

Megoldás: CSS segítségével biztosítunk elegendő helyet

A megoldás az, hogy adjunk hozzá némi helyet az anchor tag fölé, hogy a menü semmiképp ne takarja el a szöveget. Ezt CSS segítségével tehetjük meg. Az alábbi példa bemutatja, hogyan alkalmazható a CSS stílus az anchor taghez:

A css file-hoz ezt adjuk hozzá:

:target:before {
  content: "";
  display: block;
  height: 100px; 
  margin-top: -100px; 
  visibility: hidden;
  pointer-events: none;
}

Ahonnan ugrunk:

<a href="#programok">Programok →</a>

Ahova ugrunk:

<h2 class="scroll-target" id="programok">
Programok
</h3>

Ez a CSS szabály egy üres blokkot hoz létre az anchor tag fölé, amelynek magassága megegyezik a menü magasságával. Így a menü nem fogja eltakarni a szakasz címsorát, amikor az anchor tag segítségével ráugrasz.

Természetesen a ‘height’ és a ‘margin-top’ értékét mindig a tényleges menü magasságához kell igazítani, a fenti csak egy példa. Esetünkben a felső menü 100px magas, ezért a ‘height’ és a ‘margin-top’ értékek 100px.

***

Ha van kedved további IT írásokat is olvasgatni, informatika témájú cikkeink listáját erre a linkre kattintva tekintheted meg.
Ha pedig tanulásba fognál, ajánljuk figyelmedbe alábbi, online végezhető képzéseinket:
Webszerkesztés alapjai
Junior frontend fejlesztő
Junior Java backend fejlesztő
Junior szoftvertesztelő
Junior rendszerüzemeltető