Come aggiungere un pulsante appiccicoso back-to-top al tuo sito web

Ci siamo stati tutti. Hai trovato una fantastica guida online, scorri tuttolllllll fino in fondo e poi pensi: "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 è l'ultima cosa che vuoi che qualcuno faccia quando atterra su un sito che stai costruendo. Fortunatamente, l'anno è il 2019 e le migliori pratiche di web design moderne ci hanno fornito la soluzione a questo comune problema di UX: il pulsante appiccicoso di ritorno all'inizio.

Che cos'è un pulsante adesivo back-to-top?

Conosciuto anche come pulsante di scorrimento verso l'alto o immagine vai all'inizio, il pulsante adesivo di ritorno all'inizio è un utile elemento di navigazione che aiuta gli utenti a tornare all'inizio della pagina Web che stanno visualizzando. Un modello comune dell'interfaccia utente 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 di ritorno 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 creare questo, quali linee guida per il pulsante back-top devo seguire?

*Nota: potresti argomentare che gli utenti di 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 di mappe di calore come Hotjar per vedere come i visitatori del tuo sito interagiscono con la pagina.

La migliore "prassi migliore" da seguire è quella basata sui dati del tuo sito e degli utenti!

Come aggiungere un pulsante appiccicoso back-to-top al tuo sito WordPress

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

Suggerimento per professionisti: 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 hai bisogno di configurarne uno velocemente, dai un'occhiata a Local, un'app WordPress locale gratuita che è incredibilmente facile da usare.

Iniziamo! Illustrerò ogni fase del processo e puoi anche seguire questo Codepen dell'ingegnere front-end di Flywheel, Josh Masen.

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

Per questo tutorial appiccicoso sul pulsante back-to-top, utilizzeremo tre lingue:

• HTML per il markup per creare il pulsante
• CSS per modellare il pulsante e farlo corrispondere 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="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

Questo sarà il tuo pulsante appiccicoso per tornare in alto! 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à pixellato a dimensioni dello schermo diverse, come farebbe un'immagine raster.
2. Gli SVG sono universalmente supportati su tutti i browser. (Sì, esperienza utente!)
3. È facile dare uno stile con i CSS, quindi puoi cambiare tutto molto facilmente.
4. Richiede solo una riga di codice, il che lo rende leggero e migliore per le prestazioni del sito.

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

<span class="screen-reader-text">Back to top</span>

Questo è fondamentale per gli utenti che operano con lettori di schermo e migliorerà l'accessibilità del tuo sito WordPress. (Pensalo come un tag alternativo 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 modellare effettivamente il pulsante, ed è qui che definirai qualità come quanto sarà grande, quanta imbottitura dovrebbe esserci intorno, il colore, ecc.

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

Nota: stiamo usando Sass (un linguaggio per fogli di stile), per scrivere i nostri 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" il tuo pulsante apparirà o scomparirà sullo schermo e position: fixed ; è ciò che fa "attaccare" il pulsante nella posizione desiderata.

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

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

Prima di entrare nel JavaScript, ci sono solo alcune righe in più che aggiungeremo al CSS.

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #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.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

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

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

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

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

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

Aggiungeremo anche un listener di eventi, che guarderà mentre l'utente scorre (quindi sappiamo dove si trovano sulla pagina).

window.addEventListener("scroll", scrollFunc);

Quasi fatto! Successivamente, dobbiamo definire la funzione che fa sì che il pulsante riporti effettivamente l'utente in cima alla pagina. Per fare ciò, creeremo una variabile per il numero di pixel che ci troviamo 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 = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    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 di ritorno in alto.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Successivo: Scopri i 19 plugin di WordPress che gli sviluppatori amano

Scarica questo ebook per un elenco dei nostri plugin più consigliati per gli sviluppatori! Abbiamo riscontrato che tutti questi plugin sono semplici da usare, non troppo performanti sul tuo sito e semplicemente affidabili.

Questo è tutto! Ora avrai un pulsante appiccicoso per tornare all'inizio completamente funzionante e personalizzabile sul tuo sito WordPress. Per vedere l'intero tutorial in azione, ricordati di dare un'occhiata a questo Codepen dell'ingegnere front-end di Flywheel, Josh Masen!