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.
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).
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.
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'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).
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.
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.
[+] [-] beaumartinez|13 years ago|reply
It is fancy though—don't let me dissuade you from similar things.
[+] [-] mitgux|13 years ago|reply
[+] [-] mfincham|13 years ago|reply
This way if JavaScript or CSS3 animations are unavailable the usability is preserved.
[+] [-] mitgux|13 years ago|reply
[+] [-] 4lun|13 years ago|reply
That said it's running smooth on my desktop.
[+] [-] mitgux|13 years ago|reply
[+] [-] Lagged2Death|13 years ago|reply
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.
[+] [-] chris_wot|13 years ago|reply
[+] [-] mitgux|13 years ago|reply
[+] [-] rplnt|13 years ago|reply
PS: Only the first animation one works it Opera (but the jump still works, so that's great).
[+] [-] comex|13 years ago|reply
[+] [-] xpressyoo|13 years ago|reply
[+] [-] blakeperdue|13 years ago|reply
[+] [-] synor|13 years ago|reply
[+] [-] 4lun|13 years ago|reply
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.
[+] [-] ttflee|13 years ago|reply
[+] [-] brackishlake|13 years ago|reply
[deleted]