Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Animating scrollTop #392

Open
gingerbeardman opened this Issue · 8 comments

7 participants

Matt Sephton Max Alfred Mislav Marohnić Thomas Fuchs Kris Hedges Andrew Havens
Matt Sephton

The following works in jQuery but not zepto. Am I missing something?

$(function() {
    $('#top').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 'fast');
            return false;
        }
    );
});
Max

Here you go. Doesn't work in Firefox though. Care to improve? https://github.com/suprMax/ZeptoScroll

Matt Sephton

Thanks, I'll take a look. I ended up using a generic JS solution but will perhaps retrofit your plugin.

Mislav Marohnić mislav was assigned
Alfred

Sorry for the duplicate.

I would just like to add that the ScrollLeft value is good in addition to ScrollTop. Especially useful for animating for example carousels and photo galleries.

Mislav Marohnić
Collaborator

Zepto only supports CSS transitions for animations. Stuff that isn't CSS therefore can't be animated.

I'm going to think about animating scrollTop, but for now, don't count on it. Use generic JS plugins.

Thomas Fuchs madrobby was assigned
Thomas Fuchs
Owner

This is definitely plugin material.

Kris Hedges

So... I am having an issue with scrollTop() by itself in latest Firefox 19.0.2 I've built zepto from src to get the latest version of scrollTop(), but in FF scrollTop() is always just 0. Works fine in chrome & safari. I haven't tested in IE yet.
Example: coffeescript
position = ->
$('body').scrollTop()

window.onscroll = ->
console.log position()

So long as you can get an accurate scrollTop() animating the scroll is fairly trivial and I agree and would prefer adding no non CSS animations if at all possible to Zepto but getting accurate scrollTop() scrollLeft() seems more than reasonable.

Any help or comment would be greatly appreciated.

Kris Hedges

Ok. So I figured out the issue I was having not sure what the solution is though... webkit will report a proper scrollTop() value on $('body') but will always be 0 on $('html') and FF will report a proper scrollTop() value on $('html') but will always be 0 on $('body'). Seems like a bit of the ole catch-22. Using $('body,html') doesn't work only the last el seems to be applied resulting in it working in FF but not chrome meaning: reversing to $('html,body') results in it working in webkit nut not FF. So... it seems an additional browser check may be necessary...?

Andrew Havens

I also need to animate the scrollLeft attribute. I haven't found any plugins that animate the scrollLeft so if you find any, can you please post a link? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.