Come creare: scorrimento liscio

Come imparare a creare un effetto di scorrimento liscio con CSS.

Scorrimento fluido

Scorrimento fluido

Aggiungi scroll-behavior: smooth Puoi abilitare uno scorrimento fluido per l'intera pagina:

Attenzione:Puoi anche aggiungerlo a un elemento specifico/contenitore di scorrimento.

Esempio

html {
  scroll-behavior: smooth;
}

Prova personalmente

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo di comportamento di scorrimento.

soluzione multi-brower

per soluzione multi-brower Per i browser che non supportano jQuery）per creare una soluzione universale per tutti i browser:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Aggiungi uno scorrimento fluido a tutti i link
  $("a").on('click', function(event) {
    // Assicurati che this.hash abbia un valore prima di sovrascrivere il comportamento predefinito
    if (this.hash !== "") {
      // Previene il comportamento predefinito del clic sugli anelli
      event.preventDefault();
      // Memorizza il valore dell'hashtag
      var hash = this.hash;
      // Aggiungi uno scorrimento pagina fluido utilizzando il metodo animate() di jQuery
      // Numero opzionale (800) che specifica i millisecondi necessari per lo scorrimento alla regione specificata
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Dopo aver completato lo scorrimento, aggiungi il numero di posizione (#) all'URL (comportamento di clic predefinito)
        window.location.hash = hash;
      );
    } // Fine if
  );
);
</script>

Prova personalmente

Pagine correlate

Manuale di riferimento:Proprietà CSS scroll-behavior