Hacker News Reader

Comment by jkcxn | Hacker News Reader

> Rather than eagerly loading the react-scroll dependency for this, they load it on interaction with the button, saving ~7KB:

My apologies for being negative but isn't it crazy it takes 7KB to scroll to the top of the page?

View on HN

Modern browsers support `scrollTo(options)` that allows you to do it with a single line. For slightly older browsers, such as later IE releases, you need to try-catch that and use `scrollTo(x, y)`. And for older browsers still, not-the-latest IE, Opera mobile, that's the rest of the 7KB — polyfills, hacks, wrappers and more. Shortly, for browsers that don't have an animation API nor a proper scrolling API. It may be disproportionate, but for sites that want to target readers all around the world, on all devices, it can be a sensible tradeoff.

In this case better solution would be to use this single line (which works for >80% of clients) with try-catch in core and maybe load polyfills from exception handler via "bloat dispatcher".

It's not just browser support right it's however they wrapped it up to make it more compatible with react

Eh, you can always do `scrollTo(0, 0)` if you just want the scroll-to-top functionality at the expense of everything else.

But if you want a good user experience, you should really use `scrollTo({ top: 0, left: 0, behavior: 'smooth' })`

Smooth scrolling in 42B (minified, not gzipped) rather than 7KB, and supported by 85% of users' browsers (source for that number: https://caniuse.com/mdn-api_scrolltooptions)

Yeah, that's a good option if you're ok with not-100% browser compatibility.

Reply on news.ycombinator.com