Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

jquery - Bootstrap tabs scroll effect to content when clicked

I am using Bootstrap 3 Tabs like this:

<ul class="nav nav-pills nav-justified">
   <li><a href="#tab-1t" data-toggle="tab"></a></li>
   <li class="active"><a href="#tab-2" data-toggle="tab"></a></li>
   <li><a href="#tab-3" data-toggle="tab"></a></li>
</ul>

Because the tab content gets quite long i want to add a scrolling effect that centers the tab content.

I am using this snippet for other scroll-effects on the site:

$('a.scroll').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});

When i add the "scroll" class to the tab links i get the desired effect but only on already active tabs. With inactive tabs it requires two clicks.

What should i change?

UPDATE:

JSFIDDLE

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I have updated your fiddle, Now its working fine

Working Demo

jQuery

jQuery(document).ready(function ($) {

  $('.nav a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  })  

  $('a.scroll').on('click', function (e) {
    var href = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(href).offset().top
      }, 'slow');
    e.preventDefault();
  });

});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...