A HTML szabvány ősidők óta lehetőséget biztosít a weboldalon belüli navigációra, görgetésre, ami főleg hosszabb tartalom esetén tud hasznos lenni. Ehhez csak meg kell jelölnünk egy pontot az oldal forrásában (például a hozzászólások előtt), az alábbi módon:

1

<a name="comments"></a>

Majd az oldalon elhelyezünk egy vagy több hivatkozást, ami erre a pontra mutat:

1

<a href="#comments">Ugrás a hozzászólásokhoz</a>

Ennek a megoldásnak, bár egyszerű és jól működik, hátrányai is vannak: egyrészt módosítja az oldal URL-jét (példánkban a #comments hivatkozást hozzáfűzi az aktuális oldal URL-jéhez), másrészt görgetés nélkül, azonnal ugrik, így nehezen követhető, merre haladtunk az oldalon belül.

Fenti hátrányok pár sornyi jQuery kóddal könnyen leküzdhetőek. Az egyszerűbb eset, ha az oldal tetejére szeretnénk görgetni, akkor nem kell megjelölni a célpozíciót az oldalon belül, csak egy osztállyal megjelölni a linket, ami a görgetést aktiválja. A jQuery-s megközelítés további előnye, hogy nincs szükség valódi hivatkozásra, tehát tetszőleges HTML elemet (képet, gombot, ..) használhatunk:

1

<img src="kep.jpg" alt="Ugrás az oldal tetejére" class="scroll-to-top">

A kapcsolódó JavaScript kód pedig a következő:

1
2
3
4
5
6

$('.scroll-to-top').click (function (event) {
	event.preventDefault();
	$('html, body').animate ({ scrollTop: 0 }, 'slow');
 
	return false;
});

Ha nem az oldal tetejére szeretnénk görgetni, hanem egy adott pozícióra az oldalon belül, a fenti kódrészletben a scrollTop értékét 0 helyett a kívánt pozícióra kell cserélni. Persze a legtöbb esetben ezt nem tudjuk konkrét számértékként megadni, azért további módosításokra lesz szükség. A cél megjelölése az oldalon belül nem változik, a görgetést indító hivatkozás viszont igen:

1

<a href="#" class="scroll-to-target">Ugrás a hozzászólásokhoz</a>

A görgetést végző jQuery függvény pedig az alábbira módosul:

1
2
3
4
5
6
7
8

$('.scroll-to-target').click (function (event) {
	var target = $(this).data ('target');
 
	event.preventDefault();
	$('html, body').animate ({ scrollTop: $('[name=' + target + ']').position().top }, 'slow');
 
	return false;
});