Ez egy Kecs.es blog webfejlesztési ötletek, tanácsok, észrevételek

Oldal görgetése jQuery-vel

A mai web kettes honlapoknál, vagy akár csak írhatnék annyit is, hogy a jelenlegi grafikai tervezések elmentek olyan irányba, hogy jó magas fejléceink legyen az oldalon, szép és nagy felbontású képekkel. Emiatt előállhat az az eset, hogy az oldalt kis felbontással (pl.: 800x600) nézik, meg melyből a hasznos magasság kb. 450-500px a böngészőtől függően. De mit tehet az ember ha ekkora csak az oldal fejléce? Hiszen a látogatónak görgetnie kell, egy teljes monitornyit, hogy a tartalomhoz elérjen... És mint tudjuk, ami nem fér ki egy 800x600 vagy egy 1024x768-as felbontáson, az olyan információ mint ha nem is lenne... Szóval ezen esetekben csalni kell szerintem... Mert a megrendelő ragaszkodik a szép design-hoz, de a látogatót meg a tartalom fogja érdekelni... A megoldás jQuery és a scrollTo plugin.

Hivatalos oldal
Demó oldal

És egy kicsit más fajta kódot ajánlok mint a plugin fejlesztői:

<script src="jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  if ( $(window).height() < 650 )
  { setTimeout('$.scrollTo( "#scrollHere", 800 );', 500); }
});
</script>

Azért ezt, mert így csak azoknak fog scrollozódni az oldal akiknek kicsi a felbontásuk. Akiknek nagy, azoknak nem. De gondoljunk is bele, hogy ez miért kell. Abban az esetben, ha valakinek nagyobb a felbontása mint az oldal teljes magassága, nincs probléma, hiszen nincs hova scrollozni. De mi van akkor ha csak 20 pixellel is, de nagyobb a tartalom mint ami az ő felbontása... Akkor minden lapletöltésnél, egy 20 pixelt ugrana az oldal... Ami pont elég idegesítő mozgás, de görgetésnek még nem nevezném... Szóval amit nyertünk kis felbontásnál, azt elvesztettük nagynál. De ha úgy oldjuk meg ahogy én javasoltam, akkor a nagy felbontások problematikáját megoldottuk. Persze erre az egészre csak akkor van szükség, ha az oldal betöltődése után egyből akarjuk scrollozni a tartalmat automatikusan.