Slide to top

29.11.2009 | JavaScript, Uporabno

Bral sem neke zapise na spletu, kjer s pomočjo jQuerya pomaknejo okno na vrh strani. Te pomike smo sicer vajeni z name tagi, ki se jih  potem kliče s pomočjo #. No več ali manj so ti zapisi zakomplicirani s preračunavanjem višine in potem pomikom okna za to višino.

No jQuery omogoča vse bolj enostavno, saj razume kaj je top: 0. Torej lahko izvedemo scrollTop:0 in se okno postavi na vrh strani, če želimo to postavljanje še malo animirati in da to deluje v vseh brskalnikih kot tudi name tag, lahko enostavno uporabimo $(’html, body’).animate({scrollTop:0}). No bolj natančen primer je viden spodaj.


$(document).ready(function() {
$('#to_top').bind('click', function() {
$('html, body').animate({'scrollTop':0}, 1000);
});
});

Vse kar je potrebno storiti je da elementu nastavimi id = #to_top, kjer se s klikom na element sproži animacija.

Primer slajda.

Drugi primer je posredovan od @wpSEO, kjer se href uporablja za definicijo elementa, do katerega se pomakne okno:

http://www.webdevtuts.net/coding-tutorials/how-to-make-page-scroll-to-top-of-page-using-jquery/

Tagi: , , ,

6 x komentiran Slide to top

smottt
29.11.2009

Mislim, da imaš typo – “strollTop” bi moral biti “scrollTop” i think?

Sicer pa hvala za namig. Might come in handy someday. :)

Carli
30.11.2009

Eh mistype :D Thanks!

smottt
30.11.2009

Hehe, ni problema. Sicer pa eden mistype še zmeraj obstaja. Popravil si samo prvega. :D

Carli
30.11.2009

Jao! :D 10x še enkrat! :D

klavdij
08.07.2010

dober trik – ampak a ni bol izi anchor na vrhu zraven logota dat (ok če že maš jquery na stran je ql ampak sam za tole celo skripto loadat?)?

Carli
14.07.2010

Itak, lahko pogledaš na http://www.split-klima.si, in v košarico dodaš en izdelek, ki je bolj na dnu, je efekt boljši kot pa če bi samo skočilo.

Komentiraj ...


 

November 2009
M T W T F S S
« Oct   Dec »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Anketa

Uporabljate JS Framework?

Loading ... Loading ...
Wordle: Blog

Tagi