Smooth Scroll to Top Using CSS3 Animations(labs.mitgux.com)
labs.mitgux.com
Smooth Scroll to Top Using CSS3 Animations
http://labs.mitgux.com/smooth-scroll-to-top-using-css3-animations
21 comments
Perhaps if the page instantly jumped to the top, it make the user confused for a bit moment, so here where the animation make a sense!
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?
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?
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.
This way if JavaScript or CSS3 animations are unavailable the usability is preserved.
Good point mfincham, I'll keep this in mind, Thanks!
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).
That said it's running smooth on my desktop.
That said it's running smooth on my desktop.
I think because the CSS3 hardware accelerate, and this is a good point for this trick!
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.
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.
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?
It rely on the CSS3 transition instead of the jQuery animate function ..
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.
Exactly!
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).
PS: Only the first animation one works it Opera (but the jump still works, so that's great).
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.
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.
I'm curious if this works well across modern browsers (IE9+, Chrome, Safari, Firefox)?
Why do we need this?
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.
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.
Good answer, Thanks!
I saw glitches just after the mouse click.
It is fancy though—don't let me dissuade you from similar things.