Sergio Pinna

Web Designer

Link effetto smooth

Link interni ad una pagina con movimento rallentato (effetto smooth)

Link interni ad una pagina con movimento rallentato (effetto smooth), effetto che aiuta la user experience, nonché rende il sito più aggraziato. Il tutto rende l’esperienza utente molto più elegante ed accurato.

Ti è mai capitato di usare una ancora interna ad un sito? Cosa sia una ancora interna è presto detto: sono link che riportano alla stessa pagina ma in un punto diverso:

Per farti un esempio eccoti un HTML tipo:

Link interni ad una pagina con movimento rallentato (effetto smooth)

<a href="#services">Jump to services</a>

<div id="services">

</div>

cliccando sul tag a che ha un id=”Jump to services” l’utente verrà reinviato, sempre alla stessa pagina e non ad un altra, ama ad un altro punto: nel punto ove inizia il tag div con id=”services”.

Fin qui tutto bene, ma l’esperienza utente è veramente messa male: sembra che si atterri ad una pagina diversa mentre è sempre la stessa.

L’utilità delle pagine interne viene a galla sopratutto quando c’è da fare un sommario dei capitoli interni di una pagina, il classico indice di un libro per esempio: ogni titolo è un link che rimanda al testo sottostante.

Ma come rallentare tale effetto? Come renderlo più accattivante, più rallentato, più smooth?

Semplicemente utilizzando lo script jQuery presente qui sotto:

$(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();

     var target = this.hash;
     var $target = $(target);

     $('html, body').stop().animate({
         'scrollTop': $target.offset().top
     }, 900, 'swing', function () {
         window.location.hash = target;
     });
 });
});

al posto di a[href^=”#”] scrivi il selettore idoneo al quale vuoi che rimandi il link.

Ho creato anche una demopage, cliccami e ne vedrai il risultato all’opera

Se ti è piaciuto questo articolo, Link interni ad una pagina con movimento rallentato (effetto smooth), allora ti potrà essere d’interesse: Ritorno in alto dinamico di una pagina con un po’ di jQuery

Fonte:
Smooth Scrolling To Internal Links With jQuery

Condividi questo articolo