Hello. The task is as follows: when you clicked a button which is an element of the navigation tabpanel, smooth scrolling to the anchor worked, how to accomplish this? Code example here https://jsfiddle.net/04Lhqshu/1/

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div> <!-- Навигация --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Домой</a></li> <li><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Профиль</a></li> <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Сообщения</a></li> <li><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Настройки</a></li> </ul> <!-- Содержимое вкладок --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста </div> <div role="tabpanel" class="tab-pane" id="profile">Очень много текста </div> <div role="tabpanel" class="tab-pane" id="messages">Очень много текста </div> <div role="tabpanel" class="tab-pane" id="settings">.Очень много текста Очень много текста Очень много текста </div> </div> <a name="home"> </a> <div> к примеру, тут якорь</div> </div>
  • Can someone help? - Pubat
  • Can someone help? Plz) - Pubat
  • Can someone help? - Pubat
  • Can someone help? - Pubat

1 answer 1

  1. You have an asset class registered to li , and you need to register it to the link.
  2. You haven't added jquery in the example, it needs to be connected for bootstrap scripts.
  3. There are no smooth scrolling in the bootstrap scripts, write it yourself. Smooth scrolling is also performed to id not by name . For example, you can make references to the class, for example:

 $(function() { $("a.to-ancor").click(function(e) { e.preventDefault() $(this).tab('show') var _href = $(this).attr("href"); $("html, body").animate({ scrollTop: $(_href).offset().top + "px" }); return false; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div> <!-- Навигация --> <ul class="nav nav-tabs" role="tablist"> <li><a class="active to-ancor" href="#home" aria-controls="home" role="tab" data-toggle="tab">Домой</a></li> <li><a class="to-ancor" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Профиль</a></li> <li><a class="to-ancor" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Сообщения</a></li> <li><a class="to-ancor" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Настройки</a></li> </ul> <!-- Содержимое вкладок --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">1. Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текстаОчень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста Очень много текста </div> <div role="tabpanel" class="tab-pane" id="profile">2. Очень много текста </div> <div role="tabpanel" class="tab-pane" id="messages">3. Очень много текста </div> <div role="tabpanel" class="tab-pane" id="settings">4. Очень много текста Очень много текста Очень много текста </div> </div> </div>

  • Kizoso, Thank you very much, it works almost as well as I need, but the problem is, the tabs stopped working! even in your example do not work. :( - Pubat
  • @Pubat sorry corrected. - kizoso
  • thank you for your help! - Pubat