Quando si crea un sito web moderno e coinvolgente, l'esperienza utente gioca un ruolo fondamentale e uno degli elementi più apprezzati in termini di usabilità e stile è lo Smooth Scroll (scrolling fluido). Quell'effetto che accompagna l'utente da una sezione all'altra della pagina con un movimento dolce e controllato. A questo si può aggiungere una funzionalità utile e accattivante: l'evidenziazione dinamica delle voci di menu che cambia in base alla sezione visualizzata sullo schermo.
Effetto Smooth Scroll con menu attivo dinamico usando HTML, CSS e JS
In questo tutorial ti guideremo passo dopo passo nella realizzazione di questo effetto Smooth Scroll con un menu che si attiva dinamicamente. Faremo il tutto utilizzando HTML, CSS e JavaScript puro — senza dipendenze esterne. Che tu stia lavorando a un sito personale, a una landing page o a un portfolio, questa tecnica può dare un tocco professionale e interattivo alla tua interfaccia.
Tecnologie utilizzate e panoramica del risultato finale
Per realizzare l'effetto di Smooth Scroll con evidenziazione dinamica del menu l'HTML ci servirà per strutturare la pagina e creare un menu di navigazione con collegamenti interni (anchor links) che puntano alle varie sezioni. CSS si occuperà sia dello stile visivo delle sezioni e del menu, sia dell'effetto di scroll fluido. Infine, con JavaScript aggiungeremo l'intelligenza che permette di capire quale sezione è attualmente visibile nel viewport. Così da evidenziare dinamicamente la voce di menu corrispondente.
Il risultato finale sarà una pagina composta da più sezioni verticali, ciascuna collegata a una voce nel menu in alto. Cliccando su una voce la pagina scorrerà dolcemente verso la sezione desiderata. Man mano che l'utente scorre manualmente la pagina, il menu si aggiornerà automaticamente, evidenziando la voce relativa alla sezione visibile. Questa soluzione è completamente responsive. Non richiede poi librerie esterne e può essere facilmente integrata in qualsiasi progetto web statico o dinamico.
Il codice HTML per lo Smooth Scroll
Partendo dal codice HTML e quindi dalla struttura della pagina, si procede come segue:
<body>
<!-- Menu di navigazione -->
<nav id="navbar">
<ul>
<li><a href="#sezione1" class="nav-link">Sezione 1</a></li>
<li><a href="#sezione2" class="nav-link">Sezione 2</a></li>
<li><a href="#sezione3" class="nav-link">Sezione 3</a></li>
<li><a href="#sezione4" class="nav-link">Sezione 4</a></li>
</ul>
</nav>
<!-- Sezioni della pagina -->
<section id="sezione1" class="sezione">
<h2>Sezione 1</h2>
<p>Contenuto della prima sezione.</p>
</section>
<section id="sezione2" class="sezione">
<h2>Sezione 2</h2>
<p>Contenuto della seconda sezione.</p>
</section>
<section id="sezione3" class="sezione">
<h2>Sezione 3</h2>
<p>Contenuto della terza sezione.</p>
</section>
<section id="sezione4" class="sezione">
<h2>Sezione 4</h2>
<p>Contenuto della quarta sezione.</p>
</section>
</body>Analizzando l'estratto di codice HTML riportato possiamo notare che: il <nav> contiene il menu di navigazione con collegamenti interni tramite href="#sezioneX" che permette di saltare alle varie sezioni. Ogni sezione ha un id univoco che corrisponde al link nel menu.
I file CSS e JavaScript sono inclusi esternamente (style.css e script.js) per una migliore organizzazione del progetto.
Il codice CSS
Una volta impostato lo scheletro della pagina è il momento di aggiungere lo stile tramite il codice CSS di seguito:
body {
margin: 0;
font-family: Arial, sans-serif;
scroll-behavior: smooth; /* Abilita lo scroll fluido */
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
z-index: 1000;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 10px 0;
}
nav ul li {
margin: 0 15px;
}
.nav-link {
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s;
}
.nav-link:hover {
color: #ff9800;
}
/* Stile per il link attivo */
.nav-link.active {
color: #ff9800;
border-bottom: 2px solid #ff9800;
}
/* Sezioni della pagina */
.sezione {
height: 100vh;
padding: 100px 20px 20px; /* spazio per il menu fisso */
box-sizing: border-box;
}
/* Colori diversi per ogni sezione */
#sezione1 {
background-color: #ffe0b2;
}
#sezione2 {
background-color: #bbdefb;
}
#sezione3 {
background-color: #c8e6c9;
}
#sezione4 {
background-color: #f8bbd0;
}Già all'interno delle proprietà dedicate al body
scroll-behavior: smooth;
position: fixed
.nav-link.active
100vh
Il codice JavaScript
Quello che manca è l'aspetto comportamentale per gestire le animazioni create fino ad ora, quindi per concludere ecco il codice JavaScript:
const sezioni = document.querySelectorAll(".sezione");
const linkMenu = document.querySelectorAll(".nav-link");
function aggiornaMenuAttivo() {
let posizioneScroll = window.scrollY;
sezioni.forEach((sezione, index) => {
const top = sezione.offsetTop - 120;
const bottom = top + sezione.offsetHeight;
if (posizioneScroll >= top && posizioneScroll < bottom) {
linkMenu.forEach((link) => link.classList.remove("active"));
linkMenu[index].classList.add("active");
}
});
}
window.addEventListener("scroll", aggiornaMenuAttivo);
aggiornaMenuAttivo();querySelectorAll
aggiornaMenuAttivo()
active
Il controllo avviene ogni volta che l'utente scrolla la pagina. Viene quindi eseguito anche al primo caricamento per assegnare lo stato corretto fin da subito.
Ora che abbiamo completato tutte le parti di codice – HTML, CSS e JavaScript – possiamo vedere in azione il nostro effetto di Smooth Scroll con menu evidenziato dinamicamente. Ecco una breve anteprima del risultato finale in movimento:
Conclusione e considerazioni
Questo tutorial ha mostrato come creare un effetto Smooth Scroll con un menu dinamico che si evidenzia in base alla sezione visualizzata. Una soluzione semplice ma estremamente efficace per migliorare l'esperienza utente su landing page, portfolio o siti one-page.
Il codice che hai visto è però solo una base da cui partire: puoi personalizzare ulteriormente lo stile grafico, le animazioni, o aggiungere nuove sezioni. Potresti anche integrare effetti di fade-in, animazioni con librerie come AOS o GSAP o trasformare il menu in una sidebar per versioni più complesse. Dunque le possibilità sono infinite, sta a te adattarle al tuo progetto!
