Jquery Scrolltop In Bootstrap

Hello I am using jQuery in an attempt to scroll to the #target div when the #selector is clicked. The two elements are in seperate Bootstrap Tab Panels / Tab Panes. It seems I am

Solution 1:

Using .closest(which gets the parent) get the tab in which the #target div is placed. Then open that tab. Then scroll to top using animate.

Instead of using .delay() I used setTimeout because the animate will happen before the tab is opened which is not required.

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = this.href.split('#');
    showTab(target[1]);
  });
  $('#selector').click(function(e) {
    e.preventDefault();
    var target = $('#target').closest('.tab-pane').attr('id');
    showTab(target);
    setTimeout(function() {
      $('html, body, nav').animate({
        scrollTop: $("#target").offset().top
      }, 500);
    }, 500);
  });
});

functionshowTab(target) {
  $('.nav a').filter('a[href="#' + target + '"]').tab('show');
}

Here is a demo http://jsbin.com/xomafe/edit?html,js,output

Hope this helps