Question

我是一名软件开发专业的学生，对于我的Web开发课，我正在创建一个页面。我正在使用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

只需将导航栏高度的偏移量添加到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);

你甚至可以更进一步，动态地抓住导航栏的高度。

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

Answer 2

一个快速而好的解决方案，因为你知道bootstrap 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
      });
     });

Bootstrap navbar-fixed-top隐藏#content links

2 个答案: