Here's a usability enhancement: make sure you're overriding the behaviour of an <a> element which would already cause the page to scroll back up, e.g. a link to a named anchor at the top of the page or to the ID of the <html> element itself.
This way if JavaScript or CSS3 animations are unavailable the usability is preserved.
Animating scrollTop is quite a common effect that some developers/designers add (personally I'm not a fan).
Usually it's done using the jQuery animate function, meaning you can't take advantage of CSS transitions.
As you can't add a CSS transition onto the window scroll, this demo is useful as it shows a workaround that achieves the same effect using CSS transitions.
Haven't got a chance to try it right now, but using transform over margin-top sometimes results in a smoother effect on various devices (I believe it gets offloaded onto the GPU as a separate layer).
Nice hack. In practice, not convinced that CSS animations are that crucial for a scrollTop fn, given that it still depends on jQuery and requires more lines of code.
Look at it this way, it's globally over writing use preferences. This should at lowest, be a browser feature.
For anyone curious, chrome://flags has a smooth scrolling option to try. There's also browser plugins that do this. For macs this is system behavior right?
Cool idea... Only, not sure I'm following he advantage. Both examples use jquery, and the second solutions seems to be more lines of ode. What is the advantage with the CSS method?
To go into more detail, I believe CSS animations will be faster because they are built into the browser, as opposed to calculating animation effects in a Javascript interval.
FWIW, I like smooth, but this isn't quite smooth, because animating random position properties in WebKit is still slow. If at all possible, please use -webkit-transform instead.
It's horrible UX to have this. If anything it HAVE to be fast. So maybe third one would be bearable. And I have to wonder how smooth it would be with tons of flash, resized images and so on.
PS: Only the first animation one works it Opera (but the jump still works, so that's great).
Smooth scrolling in other contexts (globally in the browser, or globally in a desktop UI) usually has an off switch. I've turned off smooth scrolling everywhere I could find a switch to turn it off.
It feels like smooth scrolling wastes my time. I know we're only talking about fractions of a second, really, but when I'm concentrating on something that feels like a long and pointless interruption. Smooth scrolling also really does cost CPU (and/or GPU) power, and in today's mobile device world that means it wastes battery power.
21 comments
[ 3.3 ms ] story [ 18.3 ms ] threadThis way if JavaScript or CSS3 animations are unavailable the usability is preserved.
Usually it's done using the jQuery animate function, meaning you can't take advantage of CSS transitions.
As you can't add a CSS transition onto the window scroll, this demo is useful as it shows a workaround that achieves the same effect using CSS transitions.
That said it's running smooth on my desktop.
It is fancy though—don't let me dissuade you from similar things.
For anyone curious, chrome://flags has a smooth scrolling option to try. There's also browser plugins that do this. For macs this is system behavior right?
PS: Only the first animation one works it Opera (but the jump still works, so that's great).
It feels like smooth scrolling wastes my time. I know we're only talking about fractions of a second, really, but when I'm concentrating on something that feels like a long and pointless interruption. Smooth scrolling also really does cost CPU (and/or GPU) power, and in today's mobile device world that means it wastes battery power.