how to scroll div tag on button click
jquery, jquery-animate
Solution
Try:
$('#button1').click(function(){
$('.wrapper').animate({ //animate element that has scroll
scrollTop: 340 //for scrolling
}, 1000);
});
Fiddle here.
Problem
I need to scroll a div outer tag so that 2nd inner div shows up on button click, Pls anyone check what is wrong with this code. or is there any other method to do so? I am new to Jquery and javascript.. ``` <head> <script> $(document).ready(function(){ $('#button1').click(function(){ $('#outer').animate({top:'340px'},slow); }); }); </script> <style> .inner{ background-color:bisque; width:400px; height:400px; margin: 100px auto; } .outer{ background-color:blueviolet; width:100%; height:1000px; top:0; position:relative; } .wrapper{ width:100%; height:600px; overflow:scroll;` } </style> </head> <body> <div class="wrapper"> <div class="outer"> <div class="inner"> <input style="width:100%; height:35px; margin:20px auto;" value="Click Me to Scroll" type="button" id="button1"> </div> <div class="inner"> <input style="width:100%; height:35px; margin:20px auto;" value="Click Me to go Back" type="button" id="button2"> </div> </div> </div> </body> ```