Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animating scrollTop #392

Open
gingerbeardman opened this issue Feb 9, 2012 · 10 comments
Open

Animating scrollTop #392

gingerbeardman opened this issue Feb 9, 2012 · 10 comments

Comments

@gingerbeardman
Copy link

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-degterev
Copy link

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

@gingerbeardman
Copy link
Author

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

@ghost ghost assigned mislav Apr 7, 2012
@alfrednerstu
Copy link

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
Copy link
Collaborator

mislav commented Sep 10, 2012

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.

@ghost ghost assigned madrobby Mar 3, 2013
@madrobby
Copy link
Owner

madrobby commented Mar 3, 2013

This is definitely plugin material.

@KrisHedges
Copy link

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.

@KrisHedges
Copy link

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

@andrewhavens
Copy link

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!

@fangmingcong
Copy link

$("body").animate({scrollTop:$(".everybody_say").offset().top},1000);

Uncaught TypeError: $(...).animate is not a function

How to solve?

@gingerbeardman
Copy link
Author

Do you have zepto included in your document head?

On Tuesday, 31 May 2016, fangmingcong notifications@github.com wrote:

$("body").animate({scrollTop:$(".everybody_say").offset().top},1000);

Uncaught TypeError: $(...).animate is not a function

How to solve?


You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
#392 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/AADBzGbEkunh6ten7tNYuNICSeXcwUzOks5qG_oVgaJpZM4AJXwq
.

@madrobby madrobby modified the milestones: v1.2, v2.x Aug 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants