CODEWITHSUNDEEP
javascriptjquery
Ram Patra
Ram Patra

Reputation: 16674

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.

Upvotes: 17

Views: 65731

Answers (2)

S. S. Rawat
S. S. Rawat

Reputation: 6121

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>

Upvotes: 30

Rahul Tripathi
Rahul Tripathi

Reputation: 172548

How about trying like this:-

function scrollingdiv(parentid, id){
    $("#"+parentid).animate({scrollTop: $("#"+id).position().top}, 800, 'swing');
}

Upvotes: 10

Related Questions