Hur skapar man: Smidig rullning

Lär dig hur du skapar smidiga rullande effekter med CSS.

smidig rullning

smidig rullning

Lägg till scroll-behavior: smooth Du kan aktivera smidig rullning för hela sidan:

Observera:Det kan också läggas till till specifika element/scroll-container.

Exempel

html {
  scroll-behavior: smooth;
}

Prova själv

Webbläsarstöd

Tal i tabellen anger den första webbläsaren som fullständigt stöder scroll-behavior-attributet.

korsbläddringslösning

för webbläsare som inte stöder scroll-behavior browsrar, kan du använda JavaScript eller JavaScript-bibliotek (som jQuery）för att skapa en lösning som fungerar i alla webbläsare:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Lägg till smidig rullning för alla länkar
  $("a").on('click', function(event) {
    // Se till att this.hash har ett värde innan du överskriver standardbeteendet
    if (this.hash !== "") {
      // Förhindra standardbeteende för ankerklick
      event.preventDefault();
      // Lagra hash-värdet
      var hash = this.hash;
      // Använd jQuery:s animate() metod för att lägga till smidig sidorullning
      // Valfritt nummer (800) specificerar antalet millisekunder som krävs för att rulla till det angivna området
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Lägg till hash (#) till URL efter att rulla klart (standardklickbeteende)
        window.location.hash = hash;
      );
    } // Avsluta om
  );
);
</script>

Prova själv

Relaterade sidor

Referenshandbok:CSS scroll-behavior egenskap