scrolltop with animate not working

S

6

41

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

Speculum answered 13/9, 2013 at 6:34 Comment(5)

Like this? – Eve 13/9, 2013 at 6:44

How it's not working? Click run and you'll se the animation. – Eve 13/9, 2013 at 6:53

nope! in my site..... – Speculum 13/9, 2013 at 6:56

Can you make a JSFiddle? – Eve 13/9, 2013 at 6:58

Note on your update: you can't have animate on $(window). Use $('html,body') instead. JSFiddle – Eve 13/9, 2013 at 7:4

E

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>

Eve answered 13/9, 2013 at 7:27 Comment(5)

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. – Eve 13/9, 2013 at 8:34

Anyone know of a solution for mobile devices as well? – Dorindadorine 27/4, 2015 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: #16073395 – Carollcarolle 23/1, 2017 at 19:41

that's weird I'm using Chrome v67.0.3396.99 and $('body') is not working... I have to use $('html, body') – Kellda 13/7, 2018 at 14:19

You saved me, I did $('html') and my client complained it is not working on safari. $('html, body') works great. – Picrite 24/5, 2019 at 13:54

W

50

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

height: auto;
min-height: 100%;

Widmer answered 12/5, 2015 at 15:53 Comment(6)

Thanks! The scroll top function wasnt working unless I did this. – Dunn 31/12, 2015 at 14:43

Awesome! this works perfect. Stumbled upon this, thought very late, but found my solution. Bravo! – Dizzy 27/8, 2016 at 12:22

Wow that's strange... Had height:100% and that was causing all sorts of weird scrolling issues, especially on mobile... – Gavan 28/9, 2016 at 21:6

Let me guess, many of us used to have height: 100% because of sticky footer technique :) – Magneton 28/2, 2017 at 13:26

Thanks so much. I was playing with my js codes. But you solved my problem. – Pomatum 20/10, 2017 at 5:15

Thank you, couldn't get it working until I added this. – Skiascope 9/3, 2022 at 23:51

C

4

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!

Chez answered 22/4, 2019 at 10:15 Comment(0)

M

2

you just need to add pixel

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

Manila answered 13/9, 2013 at 6:38 Comment(2)

changed window to 'body' – Manila 13/9, 2013 at 7:11

This solved it for me, thank you. – Delorisdelorme 25/11, 2021 at 19:44

D

1

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>

Damato answered 13/9, 2013 at 7:10 Comment(0)

O

0

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

Oliy answered 18/5, 2016 at 20:35 Comment(0)

Recommended topics

Hot tags