Bootstrap navbar-fixed-top hides #content links

Question

Я студент по разработке программного обеспечения и для своего класса веб-разработки Я создаю страницу. Я использую Bootstrap, у меня есть navbar-fixed-top, а тело - таблица table-striped, где каждая строка имеет ссылку <a href = "#section" >Section</a>".

Дело в том, что это очень длинный список, поэтому я добавил автозаполнение jQuery UI и кнопку, поэтому, когда пользователь нажимает кнопку (с помощью автозаполнения), она перенаправляется в соответствующую строку #section.

автозаполнение и кнопка работают нормально, но при переадресации страницы строка, которую я хочу видеть, скрывается за навигационной панелью.

Я прочитал немного в этом и нашел, что быстрый и грязный способ сделать это с помощью CSS с:

padding-top: 65px; 

Buuuuuuut Я не хочу, чтобы это сделать, потому что это приведет к невероятно длинным столом.

Извините, если я не сделал себе ясно, вот некоторый код на всякий случай:

Пример HTML

<script> 

    //code for the redirects 
    (function ($) { 
     $.fn.goTo = function() { 
      $('html, body').animate({ 
       scrollTop: $(this).offset().top + 'px' 
      }, 'fast'); 
      return this; // for chaining... 

     } 
    })(jQuery); 

</script> 
<button class="btn btn-info" onclick="$('#' + document.getElementById('tags').value).goTo();" >Search</button> 

<!-- I dont know if theres a way to optimize this search code but right now its working fine--> 

<div class="table-responsive"> 
    <table class="table table-striped table-hover table-condensed"> 
     <thead> 
      <tr> 
       <th>Col 1</th> 
       <th>Col 2</th> 
       <th>Col 3</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id = "Section1"> 
       <th>Col 1</th> 
       <th>Col 2</th> 
       <th>Col 3</th> 
      </tr> 
      <tr id = "Section2"> 
       <th>Col 1</th> 
       <th>Col 2</th> 
       <th>Col 3</th> 
      </tr> 
      <!-- code continues similarly for nearly 1000 rows --> 
     </tbody> 
    </table> 
</div> 

Answer 1

Просто добавить смещение высоты NavBar в уравнение scrollTop.

//code for the redirects 
(function ($) { 
    $.fn.goTo = function() { 

     var offset = $(this).offset().top - 65; 

     $('html, body').animate({ 
      scrollTop: offset + 'px' 
     }, 'fast'); 
     return this; // for chaining... 
    } 
})(jQuery); 

Вы даже можете сделать это на один шаг дальше и динамически захватить высоту навигационной панели тоже.

Answer 2

Быстрое и лучшее решение для вашего кода, так и знает самозагрузка JQuery и т.д., использовать DataTable плагин, плагин применение у не нужно беспокоиться о поиске, фильтрации, пагинации и многом другом. Вот ссылка ссылки; https://datatables.net/

$(document).ready(function(){ 
    $('.table-responsive').DataTable({// Use id/ Class of html table to apply plugin 
    // u can do stuffs here 
     }); 
    });