Sådan oprettes: Glat rullemenu

Lær hvordan du bruger CSS til at skabe glatte rullemenuer.

Smooth scrolling

Section 1
Klik mig, glat rulning til nederste del 2.

Klik på linket for at se den glatte rulningseffekt.

Bemærk:Fjern scroll-behavior-attributten for at annullere glat rulning.

Smooth scrolling

tilføj til <html>-elementet scroll-behavior: smooth du kan aktivere glat rulning for hele siden:

Bemærk:du kan også tilføje det til specifikke elementer/scroll-beholdere.

Example

html {
  scroll-behavior: smooth;
}

Prøv det selv

Browser support

Talene i tabellen angiver den første browserversion, der fuldt ud understøtter scroll-behavior-attributten.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0

cross-browser solutions

for ikke-understøttende scroll-behavior tilhørende browsere kan du bruge JavaScript eller JavaScript-biblioteker (som jQuery）for at skabe en løsning, der fungerer på alle browsere:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Tilføj glat rulning til alle links
  $("a").on('click', function(event) {
    // Sørg for, at this.hash har en værdi, før du overstyrer standardadfærd
    if (this.hash !== "") {
      // Forhindre standard adfærd for ankerklik
      event.preventDefault();
      // Gem hash-værdien
      var hash = this.hash;
      // Brug jQuery's animate() metode til at tilføje glat sideglidning
      // Valgfri numerisk værdi (800) specificerer millisekunderne, der kræves for at rulle til den ønskede sektion
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Efter at have rullet til bunden, tilføj hash (#) til URL (standardklikk adfærd)
        window.location.hash = hash;
      );
    } // End if
  );
);
</script>

Prøv det selv

Related pages

Reference manual:CSS scroll-behavior attribute