Pure CSS scroll-to-top

Given all the tools CSS offers I always wondered whether it was possible to make a scroll to top link functionality via CSS only. After many unsuccessful attempts the idea came in to try with position: sticky which finally began to work.

Image credit

Using position: sticky alone wouldn’t solve the issue, I had to add an absolutely positioned wrapper and utilizing transform and viewport height (vh) units to reveal the link after scrolling down the page.

There were several iterations until everything played nicely together. Now it works as intended on capable browsers and shows up in fixed position in older ones, which sounds as an acceptable compromise to me.

Animated scroll was achieved using the relatively new scroll-behavior: smooth CSS property and falls back to simple jump to top if it’s not supported. I think it’s a fair trade-off because the main functionality is preserved, although less fancy. Even so it’s much more CPU friendly adding an event listener to the link rather than calculating the actual top offset on each scroll (plus on doc ready, window resize, etc).

Demo

https://codepen.io/rolandtoth/full/eMamVK/

Although it may look like a minor thing it really made my day and it’s amazing how far you can go with CSS only.

0 comments Comments