scrolltop with animate not working

Question

I'm trying to animate while scrolling but no luck with my code...

I have this jquery

$(window).scrollTop(200);

Now wanted to give animation effect

So tried these but not working:

1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);

I have applied this in a click function like this:

$('.goto').click(function(){
    $(window).scrollTop(485); // its working
});

And now I want to give effect of animate but not working...

How it's not working? Click _run_ and you'll se the _animation_. — Vucko, Sep 13 '13 at 06:53
Note on your update: you can't have `animate` on `$(window)`. Use `$('html,body')` instead. [JSFiddle](http://jsfiddle.net/fXx6c/2/) — Vucko, Sep 13 '13 at 07:04

Vucko · Accepted Answer · 2018-07-26T07:03:41.903

72

You have to use $('html,body') instead of $(window) because window does not have a scrollTop property.

$('#scroll-bottom').on('click', function() {
  $('html, body').animate({
    scrollTop: 2000
  }, 2000); // for all browsers
  
  // $('html').animate({scrollTop: 2000}, 2000); // works in Firefox and Chrome
  // $('body').animate({scrollTop: 2000}, 2000); // works in Safari
})

#top {
  margin-bottom: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="top">
  <button id="scroll-bottom">scroll</button>
</div>
<div>bottom</div>

edited Jul 26 '18 at 07:03

answered Sep 13 '13 at 07:27

Vucko

20,555
10
56
107

3

Yes, in _chrome_ and _safari_ works for `$('html,body')` and `$(body)`, but in _firefox_ works for `$('html,body')` and `$(html)`. Obviously the `scrolltop` has some browser compatibility issues. However, use `$('html,body')`, that seems to work for both. – Vucko Sep 13 '13 at 08:34
Anyone know of a solution for mobile devices as well? – JisuKim82 Apr 27 '15 at 22:49
What if you're in a modal/dialog box and you want to scroll to a specific part withing that section? Nvm: http://stackoverflow.com/questions/16072895/how-to-scroll-to-an-element-within-a-modal-using-jquery – eaglei22 Jan 23 '17 at 19:41
1

that's weird I'm using Chrome v67.0.3396.99 and $('body') is not working... I have to use $('html, body') – Mister Q Jul 13 '18 at 14:19
You saved me, I did `$('html')` and my client complained it is not working on safari. `$('html, body')` works great. – wonsuc May 24 '19 at 13:54

score 50 · Answer 2 · answered May 12 '15 at 15:53

50

if you have html and body style height:100%; its not working use

height: auto;
min-height: 100%;

answered May 12 '15 at 15:53

Michal Orlík

501
4
3

Thanks! The scroll top function wasnt working unless I did this. – lancey Dec 31 '15 at 14:43
Awesome! this works perfect. Stumbled upon this, thought very late, but found my solution. Bravo! – Zafar Aug 27 '16 at 12:22
Wow that's strange... Had `height:100%` and that was causing all sorts of weird scrolling issues, especially on mobile... – Brian Leishman Sep 28 '16 at 21:06
Let me guess, many of us used to have `height: 100%` because of sticky footer technique :) – cincplug Feb 28 '17 at 13:26
Thanks so much. I was playing with my js codes. But you solved my problem. – amir22 Oct 20 '17 at 05:15
Thank you, couldn't get it working until I added this. – Anna_MediaGirl Mar 09 '22 at 23:51

score 3 · Answer 3 · answered Apr 22 '19 at 10:15

3

I had this problem as well and realised that the problem was within the CSS.

In my case, I needed to remove the overflow-x: hidden; from the HTML tag.

Remove:

html {
    overflow-x: hidden;
}

Then, it worked.

Hope that helps someone!

answered Apr 22 '19 at 10:15

Brad Ahrens

4,864
5
36
47

Kimtho6 · Answer 4 · 2013-09-13T06:43:58.263

2

you just need to add pixel

$('body').animate({ scrollTop: "300px" }, 1000);

edited Sep 13 '13 at 06:43

answered Sep 13 '13 at 06:38

Kimtho6

6,154
9
40
56

changed window to 'body' – Kimtho6 Sep 13 '13 at 07:11
This solved it for me, thank you. – Colin R. Turner Nov 25 '21 at 19:44

score 1 · Answer 5 · answered Sep 13 '13 at 07:10

DEMO

<html>
function scrollmetop(dest){
    var stop = $(dest).offset().top;
    var delay = 1000;
    $('body,html').animate({scrollTop: stop}, delay);
    return false;
}

scrollmetop('#test');
<body>
    <div style="margin: 100px 100px 1000px 100px">
       <div id="test" style="width: 100px; height: 100px; border: 3px solid black;">target object</div>
    </div>
</body>
</html>

score 0 · Answer 6 · answered May 18 '16 at 20:35

I'm using Angular and was trying to scroll down to an item that had been added in an ng-repeat. I put this code inside a $timeout (with zero time, just to make it happen after the elements displayed) and this was sufficient for the new item to have an offset().top...

...but I think there was just way too much going on adding dozens of new elements, so it didn't have the processing power to scroll-animate. When I set the timeout time to 1 second, it worked (though it actually took 7 seconds before the timeout got called).

I concluded that animated, smooth scrolling won't really be tractable here, and instead I'm just using

document.body.scrollTop = entry.offset().top

scrolltop with animate not working

6 Answers6

Linked

Related