Ram swaroop Ram swaroop - 4 months ago 12
Javascript Question

How to scroll within a div with jQuery animate() function?

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.

Answer

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>