Smooth Scroll to Top Using CSS3 Animations

http://labs.mitgux.com/smooth-scroll-to-top-using-css3-animations

by dwfot • 13 years ago

26 20 13 years ago

labs.mitgux.com

mfincham• 13 years ago

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.

mitgux6• 13 years ago

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

synor• 13 years ago

Why do we need this?

4lun2• 13 years ago

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.

mitgux6• 13 years ago

Good answer, Thanks!

4lun2• 13 years ago

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.

mitgux6• 13 years ago

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

xpressyoo• 13 years ago

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.

beaumartinez• 13 years ago

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.

mitgux6• 13 years ago

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• 13 years ago

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?

chris_wot• 13 years ago

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?

mitgux6• 13 years ago

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

matthuggins• 13 years ago

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.

comex• 13 years ago

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.

rplnt• 13 years ago

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

Lagged2Death• 13 years ago

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.

ttflee• 13 years ago

I saw glitches just after the mouse click.

blakeperdue• 13 years ago

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

Smooth Scroll to Top Using CSS3 Animations

Related Stories