Creazione di un pulsante Torna all’inizio con CSS e jQuery

Un pulsante Torna all'inizio è qualcosa che molti di voi probabilmente hanno visto su molti siti web. È quella freccia che appare nell'angolo in basso a destra di una pagina web quando inizi a scorrere. Quando si fai clic su questo pulsante, ti riporta in cima alla pagina.

Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web, o sei semplicemente curioso di sapere come crearne uno da solo, benvenuto a bordo!

Ritorno al Futuro in alto

Il nostro codice consisterebbe in due parti, lo stile CSS e un piccolo script jQuery. Iniziamo con i CSS.

Stili CSS per il pulsante

Iniziamo creando stili e markup per il nostro pulsante. Ecco la parte HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a id="button"></a>

Il pulsante consisterebbe in un singolo tag di ancoraggio con un pulsante id. Includiamo anche un link alla libreria FontAwesome in modo che possiamo usare un'icona per il nostro pulsante.

Gli stili iniziali per il pulsante sarebbero simili a questo:

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

Poiché il pulsante è un elemento di ancoraggio e gli ancoraggi di default sono elementi in linea, è necessario modificare la proprietà di visualizzazione per i blocco in linea, in modo da poter assegnare le quote ad esso.

Facciamo un pulsante quadrato di 50 * 50 px con gli angoli arrotondati di 4 px. Gli daremo un colore arancione brillante e un margine di 30 px su ciascun lato.

La posizione fissa consentirebbe sempre al nostro pulsante di rimanere nello stesso punto quando scorriamo la pagina, e lo z-index di un numero molto grande fa sì che il pulsante si sovrapponga sempre ad altri elementi del sito web.

Quando passiamo il mouse su un pulsante, il cursore assume la forma di un puntatore e lo sfondo diventa grigio scuro. Per facilitare la transizione, attribuiamo la transizione di 0,3 secondi alla proprietà color-background. Inoltre, quando clicchiamo sul pulsante, anche il colore dello sfondo cambia e diventa un po' più chiaro.

Aggiungere un'icona

In questo momento il nostro pulsante è vuoto, quindi aggiungiamo un'icona. Facciamo questo aggiungendo uno pseudo-elemento :: after in questo modo:

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

Selezioneremo un'icona dalla più famosa libreria di font FontAwesome. Ho deciso di usare un'icona Chevron Up.

Per visualizzarlo in uno pseudo-elemento, imposta la famiglia di font su FontAwesome e assegna il valore Unicode della tua icona alla proprietà content.

Assicurati inoltre, che l'altezza della linea sia uguale all'altezza dell'icona se desideri che sia centrata orizzontalmente.

Aggiunta di funzionalità con jQuery

In questa sottosezione ti mostrerò come far funzionare il pulsante come previsto. Il modo più semplice per farlo è utilizzare una libreria JavaScript jQuery. Per prima cosa, dobbiamo aggiungere jQuery al codice HTML del nostro codice. Aggiungi questa riga di codice appena prima del tag di chiusura del body.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

Ora possiamo scrivere il nostro script usando la sintassi jQuery. Aggiungi il seguente script dopo la linea jQuery:

<script>

jQuery(document).ready(function() {
  
  var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

});

</script>

Diamo uno sguardo più da vicino a questo script.

Noterai la prima riga di codice:

jQuery(document).ready(function() {

In pratica si sta dicendo, eseguire il codice all'interno di questa funzione solo quando il documento è completamente caricato. Questo è un ottimo modo per prevenire gli errori, nel caso in cui il codice JavaScript desideri apportare modifiche a parti di una pagina web che non sono completamente caricate nel browser.

Il codice che eseguiamo dopo che il documento è stato caricato completamente, è costituito da due parti principali di codice in cui ognuno sta facendo le proprie cose.

La prima parte dello script fa apparire e scomparire il nostro pulsante dopo che lo scorrimento della pagina raggiunge un certo punto. La seconda parte fa scorrere la pagina verso l'alto dopo aver cliccato sul pulsante. Esaminiamo ciascuno in dettaglio.

Fai apparire e scomparire il pulsante

Questo è il codice che fa il trucco:

 var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

Prima dichiariamo una variabile btn e la puntiamo a un elemento con un ID di pulsante, in modo che sia più facile per noi fare riferimento ad esso più avanti nel codice. Inoltre, questo aiuta JavaScript ad eseguire i calcoli più velocemente. Una volta archiviato l'elemento in una variabile, JavaScript non avrà bisogno di cercare l'intera pagina ancora e ancora ogni volta che sarà necessario utilizzarlo nuovamente nel nostro codice.

.scroll()

jQuery ha una comoda funzione .scroll (). Quello che fa è collega un pezzo di codice che verrà eseguito ogni volta che si verifica un evento di scorrimento sulla tua pagina web. Prende un parametro, che è una funzione che viene eseguita ogni volta che si fa scorrere una pagina. Sebbene sia possibile applicarlo a qualsiasi elemento di scorrimento, come ad esempio cornici ed elementi con proprietà di overflow impostate per lo scorrimento, di solito lo applichiamo all'elemento della finestra, poiché in questo caso lo scorrimento avviene nella maggior parte dei casi, incluso il nostro esempio.

$(window).scroll(function() {

All'interno della funzione poniamo questa istruzione if / else:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Quello che stiamo cercando di fare qui è controllare la posizione verticale della barra di scorrimento, e fare apparire il nostro pulsante quando è al di sotto di un certo punto, e sparire quando è sopra quel punto.

Per ottenere la posizione corrente della barra di scorrimento, utseremo un metodo jQuery integrato .scrollTop (). Non accetta argomenti e restituisce semplicemente un numero di pixel nascosto sopra l'area di scorrimento.

Quindi, ogni volta che scorriamo, JavaScript controlla quanti pixel sono nascosti e li confronta con un numero. Nel nostro caso, ho impostato il numero su 300, ma puoi modificarlo se lo desideri.

Se superiamo 300px, aggiungiamo uno show di classe al nostro elemento button, che lo farà apparire. Se il numero è inferiore a 300, cancelliamo quella classe. Aggiungere e rimuovere le classi è un'altra ragione per cui jQuery è così popolare. Possiamo farlo con due semplici metodi addClass () e removeClass ().

Tuttavia non abbiamo ancora la classe show nel nostro CSS, quindi aggiungiamola:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Per default il nostro pulsante sarà nascosto, quindi dovremmo aggiungere alcune altre regole all'elemento #button:

#button {
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}

Per rendere uniforme la transizione, ho aggiunto altri due valori all'attributo di transizione, l'opacità e la visibilità impostate su 0,5 secondi.

Scorri in alto

La seconda parte dello script consente di scorrere fino alla parte superiore della pagina dopo aver cliccato sul pulsante.

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

Il primo metodo jQuery che vediamo qui è on (). Il suo primo parametro è l'evento "click" di JavaScript, che si verifica ogni volta che facciamo un clic del mouse nel nostro browser. Il secondo parametro è una funzione di gestione, che viene attivata non appena si verifica l'evento.

La funzione gestore prende un parametro evento. Possiamo chiamarlo come vogliamo, ma di solito è preferibile l'e o l'event Abbiamo bisogno del parametro event per passarlo alla funzione e usarlo per il metodo preventDefault ().

Il metodo e.preventDefault () impedisce l'azione predefinita dell'evento, ad esempio un collegamento non ci porta alla pagina successiva. Nel nostro caso non è cruciale, dal momento che il nostro elemento di ancoraggio manca dell'attributo href e non ci porterebbe comunque a una nuova pagina, ma è sempre meglio ricontrollare.

.animate()

Il metodo jQuery. Animato () è quello che fa tutto il trucco.

    $('html, body').animate({scrollTop:0}, '300');

Il primo parametro del metodo .animate () è l'elenco di proprietà che dovremmo animare. La nostra proprietà è chiamata scrollTop, e vogliamo che abbia un valore 0. Il tipo di questo parametro è un oggetto semplice ed è per questo che dobbiamo usare parentesi graffe e annotare i nostri valori usando la sintassi coppia chiave / valore.

Il secondo parametro è la velocità con cui vogliamo eseguire la nostra animazione. Viene misurato in millisecondi e maggiore è il numero, più lenta è l'animazione. Quello predefinito è 400, ma l'ho modificato a 300.

Infine, applichiamo il metodo animato all'HTML e agli elementi del corpo sulla nostra pagina web.

Ora ogni volta che clicchiamo sul pulsante, ci porta in cima alla pagina.

Demo

Puoi vedere il risultato finale in questa demo di CodePen. Ho anche incluso alcuni esempi di testo lì a scopo dimostrativo.

Guarda la penna Back to Top Button di Matthew Cain (@matthewcain) su CodePen.

Riflessioni finali

I pulsanti Torna all'inizio sono un grande elemento di usabilità di una pagina Web e l'averne uno sul tuo sito web aggiunge un piccolo ma utile dettaglio a cui la maggior parte di noi è abituata. Spero che questa guida ti abbia aiutato ad ampliare le tue conoscenze su CSS e JavaScript, fornendo alcuni momenti di "a-ha" che possono essere così utili per aspiranti progettisti e sviluppatori web.

Continua a hackerare!

***

Questo articolo è stato tradotto da inglese. L’originale puoi trovare qui: Creating a Back to Top Button with CSS & jQuery