0

I would like to scroll the page using a jQuery animation but the scrolling is disabled in the CSS and it doesn't allow the animation to take place:

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
});


$('html, body').animate({
    scrollTop: 939
}, 2500);

Here's the fiddle: http://jsfiddle.net/AKPHB/1/

5
  • 1
    It works everywhere except webkit-based browsers. Sure it's not an answer, just interesting note. Commented Jul 9, 2013 at 9:36
  • @Tommi "everywhere" — really? Commented Jul 9, 2013 at 9:40
  • I found a solution that works for me in Chrome & IE 10 Commented Jul 9, 2013 at 9:41
  • I tried in Opera 12.16; IE10 in 10 && 9 mode, latest FF, Chrome and Safari (Windows). It doesn't work in Chrome and Safari (both webkit-based) Commented Jul 9, 2013 at 9:42
  • @Tommi Im looking for a cross browser solution anyway. Commented Jul 9, 2013 at 9:47

2 Answers 2

3

If you set overflow:hidden, the scroll event doesn’t happen. So you can’t trigger it using the animation either. And really, what’s the point of animating a scroll if the user can’t scroll anyway :p

One solution is to wrap the content in another container and animate the container instead, like this:

Demo: http://jsfiddle.net/AKPHB/10/

<div id="content">
    <div class="text">text</div>
    <div class="text">text</div>
</div>

CSS:

#content{position:relative}

And the Javascript:

$('#content').animate({ top: -939 });
Sign up to request clarification or add additional context in comments.

2 Comments

Interesting to see that you used the property top instead of scrollTop for the animation. I was trying it with a container also but it seems it doesn't work with scrollTop. Thanks!
@alvaro there’s no magic there. The scroll is disabled and so is the "scrollTop" animation property since it triggers the scroll itself.
0

I can suggest using margin-top instead. The effect to the user will be the same, since there's no scrollbar:

Demo

$('html, body').animate({
    "margin-top": -100,
    "height": "+=200"     // Fix height to show additional content   
}, 2500);

2 Comments

It seems more kind of a trick than a proper way to do it. Also, is not that smooth compare with the desired result: jsfiddle.net/AKPHB/4
Im sure there should be a way. Just look at this site with overflow hidden in its body: onlinedepartment.nl/about-us/#designprinciples

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.