Förbättra Interaction to Next Paint genom att överge JavaScript-scrollning

Skapa en vacker mjuk scrollningsupplevelse som inte påverkar Core Web Vitals

Arjen Karel - linkedin

Last update: 2026-02-07

Ersätt JavaScript-scrollning med CSS idag

Det här blogginlägget har lite historia bakom sig. Fram till 2017 var det enda sättet att lägga till konsekvent mjuk scrollning att använda ett JavaScript-bibliotek. Och många utvecklare gjorde just det. Core Web Vitals existerade ännu inte och alla använde jQuery som sitt huvudsakliga JavaScript-bibliotek.

Spola nu fram till idag. Det finns mycket bättre, snabbare och enklare alternativ till JavaScript-baserad ankarscrollning. Men som Core Web Vitals-konsult ser jag dem fortfarande varje dag.

Table of Contents!

Ersätt JavaScript-scrollning med CSS idag
Varför JavaScript-baserad scrollning är 'dålig'
Varför CSS Smooth Scrolling är 'bra'
Komplett exempel:

Varför JavaScript-baserad scrollning är 'dålig'

JavaScript-baserad scrollning är dålig av 2 anledningar: det är komplicerat och det är långsamt.

Komplicerat: JavaScript-baserad scrollning är onödigt komplicerat. Du måste skriva och underhålla svårläst kod och även om [url=https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo]Window.scrollTo()[/url]-metoden har gjort koden mycket enklare är den fortfarande mycket svårare att underhålla.

Långsamt. JavaScript tenderar att blockera huvudtråden och är alltid långsammare än sin CSS-motsvarighet. Beroende på hur scrollfunktionen implementerades kan den blockera huvudtråden under ganska lång tid och orsaka en betydande fördröjning i Interaction to Next Paint-mätvärdet!

Varför CSS Smooth Scrolling är 'bra'

Jag pratade om varför JavaScript-baserad scrollning är dålig. Motsatsen gäller för CSS-baserad smooth scrolling. Det är verkligen så enkelt som att lägga till följande i din stilmall:

html{ scroll-behavior: smooth;}

Enkelt och effektivt

CSS-enradaren html { scroll-behavior: smooth; } är superenkel att implementera och effektivare än JavaScript-baserade lösningar. Denna enda kodrad aktiverar smooth scrolling för hela sidan utan några svårunderhållna JavaScript-funktioner.

Bättre prestanda

CSS-baserad smooth scrolling hanteras inbyggt av webbläsaren och kommer i alla fall att överträffa JavaScript-implementationer. Detta är särskilt viktigt för att optimera Interaction to Next Paint (INP)-mätvärdet, eftersom det belastar webbläsarens huvudtråd mindre.

Webbläsarkompatibilitet

CSS smooth scrolling har ganska bra webbläsarstöd. Äldre webbläsare, där smooth scrolling inte stöds, faller helt enkelt tillbaka till standardbeteendet med direkt hopp till ankaret.

Enkel anpassning

CSS låter dig enkelt anpassa scrollbeteendet. Till exempel låter egenskapen scroll-margin-top dig ställa in det övre avståndet till det scrollade elementet:

h1, h2, h3 {scroll-margin-top: 5rem;}

Eller ännu enklare med '[url=https://developer.mozilla.org/en-US/docs/Web/CSS/:target]target[/url]' pseudoklassen

:target {scroll-margin-top: 5rem;}

Komplett exempel:

För att se denna kod i aktion, klicka helt enkelt på innehållsförteckningen högst upp på denna sida. Du kommer att märka en fin mjuk scrollning till det klickade ankaret.

Här är ett förenklat exempel som du kan kopiera och återanvända

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>
   
</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    </nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>