scrolltop with animate not working
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>if you have html and body style height:100%; its not working use
height: auto;
min-height: 100%;
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!
you just need to add pixel
$('body').animate({ scrollTop: "300px" }, 1000);