När våren kommer passar många på att storstäda hemma. Vi delar med oss av några tips på hur du kan ge din webbplats kodbas en vårstädning genom att gno bort gammal JavaScript-kod och ersätta den med putsade, moderna standardlösningar.
Mjuk scrollning innebär att en webbsida animeras stegvis till ett innehåll. Som standard hoppar webbläsare direkt till ett innehåll som länkas.
Att animera scrollning var under en lång tid endast möjligt genom att använda JavaScript. Numera går det enkelt att åstadkomma med CSS. Det blir därmed också enkelt att följa användarens inställningar för animationer med prefers-reduced-motion.
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}Ett vanligt problem är att innehåll som scrollas till hamnar högst upp på skärmen precis, kant i kant med skärmens överdel. Detta kan göra att det blir svårare för användaren att uppfatta. Därför brukar det vara önskvärt att lägga in ett litet avstånd mellan kanten och innehållet. Även detta går idag att åstadkomma med endast CSS genom att använda scroll-margin-top eller scroll-margin-block-start. Det löser också ett annat vanligt problem; att innehållet hamnar bakom en eventuell ”sticky meny”.
h2:target {
scroll-margin-top: 1rem;
}Se en demo av mjuk scrollning i vår CodePen-demo
Samtliga webbläsare har haft stöd för scroll-behaviour och scroll-margin i många år och de är markerade som Baseline Widely available. Om webbläsare mot förmodan inte har stöd för mjuk scrollning är det enda som händer att webbläsaren hoppar direkt till innehållet.
Du hittar fler tips i artikelserien Vårstäda din webbplats.
