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

Question

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 1

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>

Answer 2

How about trying like this:-

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

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

Question

2 answers

solution1
24 ACCPTED 2013-08-31 07:16:11

solution2
8 2013-08-31 07:01:01

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

Question

2 answers

solution1 24 ACCPTED 2013-08-31 07:16:11

solution2 8 2013-08-31 07:01:01

solution1
24 ACCPTED 2013-08-31 07:16:11

solution2
8 2013-08-31 07:01:01