Sergio Pinna

Web Designer

scroll-up

Ritorno in alto dinamico di una pagina con un po’ di jQuery

Ritorno in alto dinamico di una pagina con un po’ di jQuery ti permette di far tornare la pagina “in alto” automaticamente grazie a un po’ di script jQuery. Questo ti è utile per esempio in un articolo che stai leggendo “troppo lungo” tale che hai dovuto scorrere la pagina per tornare in alto. Dal punto di vista della user experience può sicuramente risultare frustrante.

Questo qui sotto ne è un esempio:
Ritorno in alto dinamico

Il problema è facile da risolvere, si può avere un menu fisso o come vedrete qui è possibile fornire un modo rapido ed elegante per tornare al top.

Ritorno in alto dinamico di una pagina con un po’ di jQuery

1. Codice HMTL

Nell’HTML tutto quello che dobbiamo fare è aggiungere un “torna in alto” subito dopo l’apertura del tag body

<body>
<a href="#" class="back-to-top">Torna in alto</a>

2. Il CSS

Abbiamo quindi bisogno dello stile e del posizionamento. Adesso imposta la posizione fissa nel lato in basso a destra dello schermo; dandogli anche uno sfondo semitrasparente ed infine nascosta. Per farlo risaltare un po’ di più, ho anche dato un effetto hover per scurire un po’ lo sfondo.

.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
    display: none;
    z-index: 999;
}

.back-to-top:hover {    
    background-color: rgba(135, 135, 135, 0.50);
}

3. Il jQuery

Prima di tutto hai bisogno di aggiungere jQuery al tuo sito, lo puoi fare questo con l’aggiunta di un tag script come questo (da mettere nell’header):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

O puoi usare una funzione di WordPress tipo questa qui sotto:

add_action( 'wp_enqueue_scripts', 'scripts_load_cdn' );
function scripts_load_cdn() {
 wp_deregister_script( 'jquery' );
 wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', false, null, true );
 wp_enqueue_script( 'jquery' );
}

3.1 La funzione di jQuery

La funzione sottostante di jQuery è abbastanza semplice: in primo luogo abbiamo impostato la nostra offset (dopo quanto lo scorrimento dall’alto vogliamo venga visualizzato il pulsante) e per quanto tempo vogliamo che il rotolo di effetto superiore a durare. Non volendo che fosse troppo veloce, ma neanche troppo lento, altrimenti risulta fastidioso, ho impostato qui per mezzo secondo (var duration = 500).

Hai bisogno quindi di fare in modo che il pulsante sia visibile quando l’utente scorre la pagina. Per fare questo utilizziamo la funzione .scroll() jQuery.

Per scorrere sino alla cima, abbiamo bisogno di intercettare l’evento click sul pulsante.

jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });
    
    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});

Se ti è interessato questo articolo ti consiglio di leggere anche Link interni ad una pagina con movimento rallentato (effetto smooth)

Condividi questo articolo