title: how to scroll div tag on button click
body: <p>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..</p>
  
  <p><br>
        </p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
      $(document).ready(function(){
  
      $('#button1').click(function(){
      $('#outer').animate({top:'340px'},slow);    
  });
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  .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;`
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
          &lt;input style="width:100%; height:35px; margin:20px auto;" value="Click Me to Scroll" type="button" id="button1"&gt;
      &lt;/div&gt;
  
      &lt;div class="inner"&gt;
          &lt;input style="width:100%; height:35px; margin:20px auto;" value="Click Me to go Back" type="button" id="button2"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>