Rendi i tuoi collegamenti della stessa pagina leggermente più piacevoli da usare con questo effetto di scorrimento fluido nativo.

Lo scorrimento uniforme è una tecnica utilizzata nello sviluppo Web per creare un'esperienza di scorrimento fluida per gli utenti. Migliora la navigazione all'interno di una pagina Web animando il movimento di scorrimento anziché il salto improvviso predefinito.

Questa guida completa per gli sviluppatori Web ti aiuterà a implementare lo scorrimento uniforme utilizzando JavaScript.

Lo scorrimento fluido è quando una pagina web scorre senza problemi fino alla sezione desiderata, invece di saltare lì all'istante. Ciò rende l'esperienza di scorrimento più piacevole e fluida per l'utente.

Lo scorrimento uniforme può migliorare l'esperienza utente di una pagina Web in diversi modi:

  • Migliora l'appeal visivo eliminando i salti di scorrimento bruschi e stridenti, aggiungendo un tocco di eleganza.
  • Incoraggia il coinvolgimento degli utenti fornendo un'esperienza di scorrimento fluida e senza soluzione di continuità. Questo, a sua volta, motiva gli utenti a esplorare ulteriormente il contenuto.
    instagram viewer
  • Infine, lo scorrimento fluido rende la navigazione più facile per gli utenti, in particolare quando si ha a che fare con lunghe pagine Web o ci si sposta tra sezioni diverse.

Per implementare lo scorrimento uniforme, puoi modificare il comportamento di scorrimento predefinito utilizzando JavaScript.

Struttura HTML

Innanzitutto, crea gli elementi di markup necessari per le diverse finestre e la navigazione per scorrere tra di esse.

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

Questo codice HTML è costituito da una barra di navigazione contenente tre tag di ancoraggio. L'attributo href di ogni ancoraggio specifica l'identificatore univoco della sezione di destinazione (ad es. sezione1, sezione2, sezione3). Ciò garantisce che ogni collegamento su cui si fa clic raggiunga l'elemento di destinazione corrispondente.

Stile CSS

Successivamente, applica alcuni CSS per rendere la pagina visibilmente accattivante e organizzata. Aggiungere quanto segue a style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Ciò renderà i collegamenti come una riga di pulsanti e ogni sezione come un elemento a tutta altezza. Ma nota come facendo clic su un collegamento il browser passi istantaneamente alla sezione corrispondente, senza animazione.

Implementazione JavaScript

In altri, per aggiungere un'animazione fluida quando si fa clic su un tag di ancoraggio, utilizzare il metodo scrollIntoView(). Il metodo scrollIntoView() è a metodo JavaScript integrato della classe Element che consente di scorrere un elemento nell'area visibile della finestra del browser.

Quando chiami questo metodo, il browser regola la posizione di scorrimento del contenitore dell'elemento (come la finestra o un contenitore scorrevole) per rendere visibile l'elemento.

Aggiungi il tuo codice JavaScript al file script.js file. Inizia ascoltando l'attivazione dell'evento DOMContentLoaded prima di fare qualsiasi altra cosa. Ciò garantisce che la richiamata venga eseguita solo quando il DOM è completamente caricato ed è pronto a manipolare.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Quindi, definisci il file makeLinksSmooth() funzione. Inizia selezionando i tag di ancoraggio nella navigazione, poiché vorrai modificarne il comportamento. Quindi, itera su ciascun collegamento e aggiungi un listener di eventi per il relativo evento clic.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Infine, definisci il smoothScroll() funzione che accetta un oggetto listener di eventi. Chiama preventDefault() per assicurarti che il browser non esegua la sua azione predefinita quando fai clic sul collegamento. Il codice che segue lo sostituirà.

Prendi il valore href del tag di ancoraggio corrente e memorizzalo in una variabile. Tale valore dovrebbe essere l'ID della sezione di destinazione, con il prefisso "#", quindi utilizzalo per selezionare l'elemento della sezione tramite querySelector(). Se il targetElement è presente, eseguilo scrollIntoView metodo e passare il comportamento "liscio" in un parametro oggetto per completare l'effetto.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

Con ciò, la tua pagina web finita scorrerà agevolmente su ogni sezione quando fai clic su un link:

Per migliorare ulteriormente l'esperienza di scorrimento fluido, puoi perfezionare alcuni aspetti.

È possibile regolare la posizione verticale dello scorrimento utilizzando il bloccare proprietà dell'argomento delle impostazioni. Utilizza valori come "start", "center" o "end" per identificare la parte dell'elemento di destinazione a cui scorrere:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Aggiunta di effetti di andamento

Applica effetti di attenuazione all'animazione di scorrimento per creare una transizione più naturale e visivamente accattivante. Funzioni di facilitazione come facilitazione in entrata, facilitazione in uscita o personalizzata curve di bezier cubico può controllare l'accelerazione e la decelerazione del movimento di scorrimento. Puoi utilizzare una funzione di temporizzazione personalizzata con la proprietà CSS scroll-behavior o una libreria JavaScript come "smooth-scroll" per ottenere lo stesso risultato.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Assicurati che l'implementazione dello scorrimento uniforme funzioni in modo coerente su browser diversi. Testare e gestire eventuali stranezze o incoerenze specifiche del browser che potrebbero sorgere.

Puoi usare un sito web come Posso usare per testare il supporto del browser durante la compilazione. Prendi in considerazione l'utilizzo di una libreria JavaScript o polyfill per garantire la compatibilità tra browser e fornire un'esperienza senza interruzioni per tutti gli utenti.

Lo scorrimento fluido aggiunge un tocco di eleganza e migliora l'esperienza dell'utente creando un effetto di scorrimento fluido e visivamente piacevole. Seguendo i passaggi descritti in questa guida, gli sviluppatori Web possono implementare lo scorrimento fluido utilizzando JavaScript.

La messa a punto del comportamento di scorrimento, l'aggiunta di effetti di allentamento e la garanzia della compatibilità tra browser lo faranno migliora ulteriormente l'esperienza di scorrimento fluido, rendendo le tue pagine web più coinvolgenti e piacevoli navigare.