Carli – ilraC

Slide to top

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: animacija, enostavno, jQuery, PHP

6 x komentiran Slide to top

Komentiraj ...