Menu
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.
861
The scrollTo method: The scrollTo() is used to scroll to the specified element in the browser.
click(function(event) { event. preventDefault(); $. scrollTo($('#myDiv'), 1000); });
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
