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: , , ,

4 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

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