Scroll-behavior – smooth scroll pomocí CSS, bez Javascriptu

Čas od času se setkáme s tím, že potřebujeme na webu vyřešit smooth scroll (plynulé scrollování) mezi sekcemi pomocí tzv. kotev. Jednoduše tedy vytvoříme odkaz a do href atributu dáme #id-sekce, na kterou chceme směřovat, nic složitého. Výchozí chování prohlížečů však nemusí být v některých případech vůbec pěkné, prohlížeč se místo plynulého posunu na danou sekci přesune skokem a pro lepší požitek uživatele to lze vyřešit určitě lépe.

Nejčastější a nejjednodušší možností je využít smooth scroll, kdy se okno prohlížeče na danou sekci přesune plynule. Možností, jak toho docílit je několik, nejčastěji narazíte na řešení pomocí jQuery, které může vypadat nějak takto:

Tohle řešení má své výhody i nevýhody. Tou největší nevýhodou je jednoznačně závislost na obrovské Javascriptové knihovně jQuery. Výhodou může být například možnost nastavení rychlosti, křivky animace a dalšího přizpůsobení plynulého posunu.

CSS řešení, o kterém se nemluví

V CSS můžeme najít užitečnou vlastnost scroll-behavior, které lze nastavit hodnotu smooth. Ta dokáže docílit našeho plynulého scrollování naprosto jednoduše, jedním řádkem v CSS, bez nutnosti jakéhokoliv Javascriptu.

Ukázka v praxi

Podpora prohlížečů

Vše vypadá krásně a jednoduše. Velkou nevýhodou zde může být absence nastavení rychlosti a samotné animace plynulého posunu, ve většině případech to ale stejně není podstatné.

Hlavním problémem v současné době je ne příliš velká podpora ze strany prohlížečů, aktuálně je to pouze 78.08%. Podrobněji se na podporu můžeme podívat na datech z Can I use:

Nemusíme ale příliš zoufat. Jak už je tomu zvykem, i pro CSS vlastnost scroll-behavior existuje JS pollyfil smoothscroll od iamdustan. Jeho použití spočívá pouze v nalinkování malého Javascriptu a zavolání jeho inicializace. Otázkou pak je, jestli není pro nás v aktuálním projektu výhodnější sáhnout po starém dobrém Javascriptovém řešení rovnou.

Více informací o CSS vlastnosti scroll-behavior.