Calisto Calisto - 2 months ago 8
Javascript Question

JQuery Animate ScrollTop doesn't work

I'm trying to make the page scroll down to '.block3' on clicking the green block. What am I missing here? I can't seem to get it working and I checked similar threads with no luck.



$(document).ready(function() {
$('.down').click(function() {
alert("y no work?");
$('html', 'body').animate({
scrollTop: $('.block3').offset().top
}, 800, "easeOutQuart");
});
});

.down {
background: green;
width: 50px;
height: 50px;
}
.block1,.block2,.block3 {
background: red;
width: 200px;
height: 600px;
margin: 1em 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="down"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>




Answer

The problem was the selector. You can scroll only one element at a time. And for the easing you need extra libraries.

I noticed your scroll is not reaching the end. I presume that's the indent

$(document).ready(function() {

	$('.down').click(function() {
		$('body').animate({scrollTop:$('.block3').offset().top}, 800, 'linear');
	});
 
 });
.down {background:green; width:50px; height:50px; }
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="down"></div>

<div class="block1"></div>

<div class="block2"></div>

<div class="block3"></div>

Comments