title: How to set scrollTop inside a bootstrap tab
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $('#s5').on('click', function (event) {
       $('.nav-tabs a[href="#listcontent"]').tab('show');
       $('#side').animate({
           scrollTop: $('#stage5').offset().top
       }, 2000);
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      margin: 0;
      padding: 0;
      height: 100%;
  }
  .fill {
      padding: 0;
      min-height: 100%;
      height: 100%;
      width: 100%;
      min-width: 100%;
  }
  .container-side {
      padding: 10px 0 10px 15px;
      min-height: 100%;
      height: 100%;
  }
  .tab-content {
      overflow: auto;
      height: calc(100vh - 202px);
      /* 100vh = 100% height of viewport. 182px = 100px (#header) + 20px (.container-side) + 42px  (.nav-tabs) + 40px (#footer) */
      height: -webkit-calc(100vh - 202px);
      height: -moz-calc(100vh - 202px);
  }
  .container-side ul {
      margin-right: 15px;
  }
  .fixheight {
      min-height: 200px;
  }
  #sidecontent {
      width: 100%;
      min-width: 100%;
      height: calc(100vh - 197px);
      /* 100vh = 100% height of viewport. 197px = 192px (.tab-content) + 5px */
      height: -webkit-calc(100vh - 207px);
      height: -moz-calc(100vh - 207px);
  }
  body {
      padding-top: 100px;
      padding-bottom: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="container-fluid fill"&gt;
      &lt;div class="row-fluid fill"&gt;
          &lt;div class="col-xs-12 col-sm-5 col-md-5 container-side"&gt;
              &lt;ul class="nav nav-tabs" role="tablist"&gt;
                  &lt;li role="presentation" class="active"&gt;&lt;a href="#content" data-toggle="tab" role="tab"&gt;Content&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#listcontent" data-toggle="tab" role="tab"&gt;listcontent&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div id="side" class="tab-content"&gt;
                  &lt;div id="content" class="container-fluid tab-pane fade in active"&gt;
                      &lt;h2&gt;Route 1&lt;/h2&gt;
  
                      &lt;div&gt;Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus.&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="listcontent" class="container-fluid tab-pane fade"&gt;
                      &lt;div id="stage1" class="fixheight"&gt;
                           &lt;h2&gt;Stage 1&lt;/h2&gt;
  
                      &lt;/div&gt;
                      &lt;div id="stage2" class="fixheight"&gt;
                           &lt;h2&gt;Stage 2&lt;/h2&gt;
  
                      &lt;/div&gt;
                      &lt;div id="stage3" class="fixheight"&gt;
                           &lt;h2&gt;Stage 3&lt;/h2&gt;
  
                      &lt;/div&gt;
                      &lt;div id="stage4" class="fixheight"&gt;
                           &lt;h2&gt;Stage 4&lt;/h2&gt;
  
                      &lt;/div&gt;
                      &lt;div id="stage5" class="fixheight"&gt;
                           &lt;h2&gt;Stage 5&lt;/h2&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-12 col-sm-7 col-md-7 container-map"&gt;
              &lt;div id="map"&gt;
                  &lt;div id="s5"&gt;stage5&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="sidebar"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the jsfidle code : <a href="http://jsfiddle.net/BrunoD/fn3L0v20/1/" rel="nofollow">http://jsfiddle.net/BrunoD/fn3L0v20/1/</a></p>
  
  <p>After a click on <code>stage5</code> link, I change the tab to <code>listcontent</code> tab and then i would like that the scroll bar positioned on <code>stage5</code> div inside the <code>listcontent</code> div</p>
  
  <p>Unfortunately the position of the scroll bar is not moved.</p>