Corsi on-line

Scrolling di pagina animato con jQuery

Oggi voglio condividere con voi un semplicissimo codicillo creato grazie a jQuery grazie al quale è possibile realizzare uno scrolling animato di pagina verso una destinazione specifica, come se ci fosse un "ancora". Per chi non lo sapesse un "ancora" non è altro che un link privo dell’attributo href (che è sostituito da "name") il cui scopo consiste nel marcare (in altezza) un punto preciso della pagina al fine di consentire dei salti immediati da un punto ad un altro dello stesso documento.

Invece di utilizzare le classiche "ancore", vediamo come ottenere lo stesso risultato utilizzando jQuery la quale ci consente, inoltre, di aggiungere un gradevole effetto animato allo scrolling del documento.
Di seguito la funzione Javascript:

function scroll_to(id) {
  $('html,body').animate({ scrollTop: $('#'+id).offset().top },'slow');
}

Il suo utilizzo è semplicissimo: la si richiama (ad esempio al click su un link) passandole come unico argomento l’ID univoco dell’elemento che si desidera raggiungere.

Post correlati
I più letti del mese
Tematiche