Come aggiungere un pulsante appiccicoso "Torna all'inizio" al tuo sito web

Ci siamo passati tutti. Hai trovato una fantastica guida online, l'hai fatta scorrere fino in fondo e poi hai pensato: "Wow, mi piacerebbe vedere cos'altro ha da offrire questo sito!"

Ma poi devi scorrere.

TUTTO.

IL.

MODO.

A.

IL.

SUPERIORE.

E poi pensi…. "Hmmm, non importa." E chiudi la pagina.

Come web designer, questa è quasi l'ultima cosa che vuoi che qualcuno faccia quando atterra su un sito che stai costruendo. Fortunatamente, le migliori pratiche di web design moderno ci hanno dato la soluzione a questo comune problema di UX: il pulsante adesivo back-to-top.

Che cos'è un pulsante appiccicoso Torna all'inizio?

Conosciuto anche come pulsante di scorrimento verso l'alto o immagine per andare all'inizio, il pulsante appiccicoso torna all'inizio è un utile elemento di navigazione che aiuta gli utenti a tornare all'inizio della pagina Web che stanno visualizzando. Un modello di interfaccia utente comune consiste nel posizionare questo pulsante nell'angolo in basso a destra dello schermo, rendendolo "appiccicoso" tramite una posizione fissa in modo che sia sempre accessibile mentre l'utente scorre la pagina verso il basso.

Cose da considerare prima di aggiungere un pulsante Torna all'inizio

Come ogni tendenza di design popolare, ti incoraggio a fare un passo indietro prima di implementarlo sul tuo sito per chiederti: se ho intenzione di crearlo, quali linee guida per il pulsante back-top devo seguire?

Ecco alcune domande a cui rispondere prima di creare il pulsante di scorrimento verso l'alto:

• Dove sarà collocato?
• Quanto dovrebbe essere grande (o piccolo)?
• Quali modelli di design dovresti seguire in modo che rimanga fedele al marchio? (Pensa a colori, caratteri, icone, ecc.)
• Rischia di coprire contenuti importanti del sito, come le informazioni in una barra laterale?
• Cosa succede sui dispositivi mobili? Sarà reattivo?
• Ne hai davvero bisogno?*

*Nota: potresti argomentare che gli utenti oggi sono condizionati a scorrere verso il basso (e tornare indietro!) su una pagina, il che eliminerebbe la "necessità" di un pulsante per tornare all'inizio. Il mio consiglio: provalo! Aggiungi un evento di Google Analytics al clic o utilizza uno strumento heatmap come Hotjar per vedere come i visitatori del tuo sito interagiscono con la pagina.

La migliore "best practice" da seguire è quella basata sui dati del tuo sito e dei tuoi utenti!

Come aggiungere un pulsante Back-to-Top appiccicoso al tuo sito WordPress

In questo tutorial, ti mostrerò come aggiungere l'esatto pulsante back-to-top che usiamo qui su Layout! L'unica differenza è che abbiamo posizionato il nostro in un'intestazione adesiva nella parte superiore dello schermo, invece che nell'angolo in basso a destra. (Ma non preoccuparti, è lo stesso concetto!)

Consiglio dell'esperto: sebbene questo tutorial non sia troppo avanzato, consiglio comunque di provarlo su un sito di staging o in un ambiente locale, quindi non c'è assolutamente alcun rischio per il tuo sito live. Se devi crearne uno velocemente, dai un'occhiata a Local, un'app WordPress locale gratuita incredibilmente facile da usare.

Guarda il pulsante Scorri verso l'alto di Pen ES6 di Josh Lawler (@joshuamasen) su CodePen.

Per questo tutorial sui pulsanti back-to-top appiccicosi, utilizzeremo tre lingue:

• HTML per il markup per creare il pulsante
• CSS per modellare il pulsante e abbinarlo al tuo marchio
• JavaScript per farlo "funzionare" e definire i comportamenti del pulsante

Nell'HTML troverai le seguenti righe:

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Torna all'inizio</span>
</a>

Questo sarà il tuo pulsante appiccicoso per tornare in cima! Puoi vedere che abbiamo aggiunto una classe CSS chiamata .top-link e stiamo usando un semplice JavaScript per "farlo funzionare". Stiamo anche usando un SVG in linea per il pulsante.

Oltre a un SVG, puoi anche utilizzare un file immagine o un'icona del carattere per creare il pulsante. Preferiamo il metodo SVG, tuttavia, perché:

1. Non verrà pixelato a diverse dimensioni dello schermo, come farebbe un'immagine raster.
2. Gli SVG sono universalmente supportati su tutti i browser. (Yay, esperienza utente!)
3. È facile da modellare con i CSS, quindi puoi cambiare tutto molto facilmente.
4. Richiede solo una riga di codice, rendendolo leggero e migliore per le prestazioni del sito.

L'ultimo pezzo davvero importante che troverai nell'HTML è questa riga:

 <span class="screen-reader-text">Torna all'inizio</span>

Questo è fondamentale per gli utenti che utilizzano screen reader e migliorerà l'accessibilità del tuo sito WordPress. (Pensalo come un tag alt per un'immagine, ma per il tuo pulsante di scorrimento verso l'alto!)

Ora parliamo di più di quella classe CSS, .top-link . Lo stiamo usando per dare effettivamente uno stile al pulsante, ed è qui che definirai qualità come quanto sarà grande, quanta imbottitura dovrebbe essere attorno ad esso, il colore, ecc.

 .top-link {
  transizione: tutti i .25 facilitano l'entrata e l'uscita;
  posizione: fissa;
  in basso: 0;
  destra: 0;
  display: flessibile in linea;
  
 cursore: puntatore;
 align-items: centro;
 giustifica-contenuto: centro;
 margine: 0 3em 3em 0;
 raggio del bordo: 50%;
 imbottitura: .25em;
 larghezza: 80px;
 altezza: 80px;
 colore di sfondo: #F8F8F8;

Nota: stiamo usando Sass (un linguaggio per fogli di stile), per scrivere il nostro CSS un po' più velocemente. Ulteriori informazioni su questo preprocessore qui.

Un paio di pezzi importanti da questo frammento: transition: all .25s ease-in-out ; controlla quanto "velocemente" apparirà o scomparirà il tuo pulsante sullo schermo, e position: fixed ; è ciò che fa "attaccare" il pulsante alla posizione desiderata.

Successivamente, vedrai le regole per .show e .hide . Useremo JavaScript per passare da una classe all'altra per indicare al browser quando il pulsante dovrebbe (o non dovrebbe) apparire sulla pagina.

 .spettacolo {
    visibilità: visibile;
    opacità: 1;
  }
  
  .nascondere {
    visibilità: nascosta;
    opacità: 0;
  }

Prima di entrare nel JavaScript, ci sono solo poche altre righe che aggiungeremo al CSS.

 svg {
 riempimento: #000;
 larghezza: 24px;
 altezza: 12px;
}
&:passa il mouse {
 colore di sfondo: #E8E8E8;
 	svg {
	 riempimento: #000000;
	}
}

Queste classi stilizzeranno l'immagine SVG per la freccia stessa e diranno al browser come visualizzare il pulsante quando un utente ci passa sopra.

Infine, aggiungeremo alcuni CSS per nascondere il testo che dice "torna all'inizio" per gli screen reader.

 // Testo destinato solo agli screen reader.
.screen-reader-testo {
	posizione: assoluta;
	percorso clip: inserto (50%);
	margine: -1px;
	bordo: 0;
	imbottitura: 0;
	larghezza: 1px;
	altezza: 1px;
	trabocco: nascosto;
	a capo automatico: normale! importante;
	clip: rect(1px, 1px, 1px, 1px);
	&:messa a fuoco {
		blocco di visualizzazione;
		in alto: 5px;
		sinistra: 5px;
		indice z: 100000; // Sopra la barra degli strumenti di WP
		percorso clip: nessuno;
		colore di sfondo: #eee;
		imbottitura: 15px 23px 14px;
		larghezza: automatico;
		altezza: automatico;
		decorazione del testo: nessuna;
		altezza della riga: normale;
		colore: #444;
		dimensione carattere: 1em;
		clip: auto! importante;
	}
}

Ora su JavaScript! Lo faremo senza caricare jQuery, che ti aiuterà a mantenere il tuo codice leggero e veloce da caricare.

La prima variabile aiuterà il browser a trovare il pulsante.

 // Imposta una variabile per il nostro elemento pulsante.
const scrollToTopButton = document.getElementById('js-top');

Successivamente, creeremo una funzione che mostra il pulsante di scorrimento verso l'alto se l'utente scorre oltre l'altezza della finestra iniziale.

 const scrollFunc = () => {
  // Ottieni il valore di scorrimento corrente
  let y = window.scrollY;
  
  // Se il valore di scorrimento è maggiore dell'altezza della finestra, aggiungiamo una classe al pulsante di scorrimento verso l'alto per mostrarlo!
  se (y > 0) {
    scrollToTopButton.className = "mostra collegamento superiore";
  } altro {
    scrollToTopButton.className = "nascondi collegamento superiore";
  }
};

Aggiungeremo anche un ascoltatore di eventi, che guarderà mentre l'utente scorre (così sappiamo dove si trova sulla pagina).

 window.addEventListener("scroll", scrollFunc);

Quasi fatto! Successivamente, dobbiamo definire la funzione che fa sì che il pulsante riporti effettivamente l'utente all'inizio della pagina. Per fare ciò, creeremo una variabile per il numero di pixel che siamo dalla parte superiore della pagina. Se quel numero è maggiore di 0, la funzione lo riporterà a 0, portandoci in cima!

Aggiungeremo anche una piccola animazione qui, quindi il salto non è troppo improvviso.

 const scrollToTop = () => {
  // Impostiamo una variabile per il numero di pixel dalla parte superiore del documento.
  const c = document.documentElement.scrollTop || documento.corpo.scrollTop;
  
  // Se quel numero è maggiore di 0, torneremo a 0, o all'inizio del documento.
  // Animeremo anche lo scroll con requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  se (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo prende una coordinata x e y.
    // Aumenta il valore '10' per ottenere uno scorrimento più fluido/lento!
    window.scrollTo(0, c - c / 10);
  }
};

Ultimo ma non meno importante, dobbiamo solo dire alla pagina di eseguire quella funzione quando qualcuno fa clic sul nostro pulsante appiccicoso torna all'inizio.

 // Quando si fa clic sul pulsante, eseguire la nostra funzione ScrolltoTop qui sopra!
scrollToTopButton.onclick = funzione(e) {
  e.preventDefault();
  scrollToTop();
} 

Questo è tutto! Ora avrai un pulsante adesivo back-to-top completamente funzionante e personalizzabile sul tuo sito WordPress.