title: Maintain scroll position when switching between bootstrap tabs
body: <p>I have Bootstrap tabs that switch between panes which are using the <a href="http://manos.malihu.gr/jquery-custom-content-scroller/" rel="nofollow noreferrer">Malihu custom content scrollbar plugin</a> to override the browser scrollbars. However, when you click the different tabs, the scroll position is not maintained from the previous time you viewed the tab. The pane's scroll position returns to the top. Is there something I can do to maintain the scroll position?</p>
  
  <p>I've created a fiddle to illustrate the issue:
  <a href="http://jsfiddle.net/zfh3u37k/3/" rel="nofollow noreferrer">http://jsfiddle.net/zfh3u37k/3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var container1 = $('.tab-body');
  
  for (var i = 0; i &lt; 500; i++) {
    container1.append("&lt;p&gt;" + i + "&lt;/p&gt;");
  }
  
  $(".tab-body").mCustomScrollbar({
    theme: 'minimal-dark',
    alwaysShowScrollbar: 0,
    autoHideScrollbar: true,
    advanced: {
      updateOnContentResize: true
    },
    mouseWheel: {
      scrollAmount: 150
    },
    scrollInertia: 350
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tab-body {
    height: 200px;
    width: 200px;
    padding: 15px;
    border: 1px solid black;
    max-height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.0/jquery.mCustomScrollbar.min.css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.0/jquery.mCustomScrollbar.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="tab" href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
    &lt;div id="home" class="tab-pane fade in active"&gt;
      &lt;div class="tab-body"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="menu1" class="tab-pane fade"&gt;
      &lt;div class="tab-body"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="menu2" class="tab-pane fade"&gt;
      &lt;div class="tab-body"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>