Animating scrollTop #392

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

Projects

None yet

8 participants

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;
        }
    );
});
Contributor
suprMax commented Feb 28, 2012

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

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

@mislav mislav was assigned Apr 7, 2012

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.

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.

@madrobby madrobby was assigned Mar 3, 2013
Owner
madrobby commented Mar 3, 2013

This is definitely plugin material.

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.

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

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!

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

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

How to solve?

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
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment