Bootstrap导航栏固定顶部隐藏#content链接

Question

Im a software development student and for my web development class I am creating a page. I am using Bootstrap, I have a navbar-fixed-top and the body is a table-striped table where every row has a <a href = "#section" >Section</a>" link.

The thing is that it is a very long list so I added a jQuery UI autocomplete and a button, so when the user hits the button (helped with the autocomplete) it redirects to the corresponding #section row.

the autocomplete and the button work just fine, but when the page redirects happens the row that I want to see gets hidden behind the navbar.

I read a little into this and found that the quick and dirty way to do this is via css with:

padding-top: 65px; 

Buuuuuuut I dont want to do this because it will result in a incredibly long table.

Sorry if I didn't made myself clear, here is some code just in case:

Example 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

Simply add the offset of the navbar height into the scrollTop equation.

//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);

You could even take it one step further and dynamically grab the height of the navbar too.

var navHeight = $('.nav').height();

Answer 2

A quick and better solution for your code since u know bootstrap jquery etc, use DataTable plugin, applying plugin u need not worry about the search,filtering,pagination and much more. Here is the reference link; https://datatables.net/

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