I have this code snippet which scrolls the entire body to a particular location →
$('html, body').animate({ scrollTop: 1000}, 800, 'swing');But what if i want to scroll to a particular location within a div like this →
$('#div-id').animate({ scrollTop: 1000}, 800, 'swing');I tried this way but its not working, can you tell me where i am going wrong?
NOTE: The element #div-id has overflow:auto as one of its css rule.
Try this demo:
$('#div').scroll();
$("#div").animate({
scrollTop: 1000
}, 2000);#div {
height: 100px;
overflow: scroll;
width: 200px;
border: 2px solid red;
}<!DOCTYPE html>
<html>
<body>
<div id='div'>
dads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads
dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads dads dadsdads dadsdads dadsdads dadsdads dadsdads
dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dadsdads dads
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>