Плавный скролл после открытия вкладки в bootstrap 3

spro1

Гуру форума
Регистрация
26 Май 2013
Сообщения
226
Реакции
81
Всем доброго времени!
Прошу помочь в допиливании скрипта

Есть вкладки на bootstrap 3 взятые за основу. Мне нужно сделать вкладки фиксированными при прокрутке.
Содержимое вкладок при этом объемное и не помещается на одну страницу.
Мне нужно сделать так, чтобы при нажатии на вкладку происходил скролл к началу содержимого вкладки(по сути к якорю)
Сейчас при первом нажатии открывается вкладка и при следующем нажатии происходит скролл. А надо чтобы нажал - открылась вкладка и сразу скролл

js:
PHP:
<script type="text/javascript">
(function($){
    $(function(){
      $(".tabs-stiky a").click(function(e){
        e.preventDefault();
        var id  = $(this).attr('href'),
            top = $(id).offset().top;
        $(this).tab('show');
        $('body,html').animate({scrollTop: top}, 500);
    
      });
    });
})(jQuery);
</script>

html:
PHP:
            <div class="item-tabs">
                <div class="tabs-stiky">
                    <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#item-desc" id="desc-tab" data-toggle="tab">
                                    Вкладка 1
                                </a>
                            </li>
                            <li>
                                <a href="#item-prop" id="prop-tab" data-toggle="tab">
                                    Вкладка 2
                                </a>
                            </li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                        <div class="tab-pane fade active in" id="item-desc">
                            Содержимое вкладки
                        </div>
                        <div class="tab-pane fade" id="item-prop">
                            Содержимое вкладки
                        </div>
            </div>
 
А надо чтобы нажал - открылась вкладка и сразу скролл
HTML:
jQuery(document).ready(function($){
   $(".tabs-stiky a").on('click shown.bs.tab', function(e){
     if(e.type == 'click'){
        $(this).tab('show');
      } else {
         var id  = $(this).attr('href'),
             top = $(id).offset().top;
         $('body,html').animate({scrollTop: top}, 500);
      }
  });
});
 
HTML:
jQuery(document).ready(function($){
   $(".tabs-stiky a").on('click shown.bs.tab', function(e){
     if(e.type == 'click'){
        $(this).tab('show');
      } else {
         var id  = $(this).attr('href'),
             top = $(id).offset().top;
         $('body,html').animate({scrollTop: top}, 500);
      }
  });
});
Absolute, спасибо!
Так работает, но после первой загрузки страницы, если кликнуть на вкладку первый раз, страница перезагружается и уже после перезагрузки все работает как надо.
Скрытое содержимое для пользователя(ей): Absolute, spro1
 
Absolute, спасибо!
Так работает, но после первой загрузки страницы, если кликнуть на вкладку первый раз, страница перезагружается и уже после перезагрузки все работает как надо.
Попробуйте вернуть false на click
HTML:
jQuery(document).ready(function($){
   $(".tabs-stiky a").on('click shown.bs.tab', function(e){
     if(e.type == 'click'){
        $(this).tab('show');
        return false;
      } else {
         var id  = $(this).attr('href'),
             top = $(id).offset().top;
         $('body,html').animate({scrollTop: top}, 500);
      }

  });
});
 
Назад
Сверху