

Smooth Scroll to Top Using CSS3 Animations - dwfot
http://labs.mitgux.com/smooth-scroll-to-top-using-css3-animations

======
beaumartinez
When I press "back to top", I want to go there immediately—not after a few
seconds of a fancy effect. Once is cool. More than that is annoying.

It is fancy though—don't let me dissuade you from similar things.

~~~
mitgux
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!

~~~
Already__Taken
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?

------
mfincham
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.

~~~
mitgux
Good point mfincham, I'll keep this in mind, Thanks!

------
4lun
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.

~~~
mitgux
I think because the CSS3 hardware accelerate, and this is a good point for
this trick!

------
Lagged2Death
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.

------
chris_wot
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?

~~~
mitgux
It rely on the CSS3 transition instead of the jQuery animate function ..

~~~
matthuggins
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.

~~~
mitgux
Exactly!

------
rplnt
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).

------
comex
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.

------
xpressyoo
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.

------
blakeperdue
I'm curious if this works well across modern browsers (IE9+, Chrome, Safari,
Firefox)?

------
synor
Why do we need this?

~~~
4lun
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.

~~~
mitgux
Good answer, Thanks!

------
ttflee
I saw glitches just after the mouse click.

