Question

我创建了一个位于bootstrap导航栏下的自定义“subnavbar”。它基于wrapbootstrap的代码。

我想使用scrolltop启用平滑滚动。我有以下Javascript：

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

        $('#subnav').bind('click', function(e) {
            e.preventDefault();
            $('html,body').animate({scrollTop: $(this.hash).offset().top});                                                         
        });
    });

然而，我似乎无法使其发挥作用。我使用了错误的＃参考吗？这是一个bootply：http://bootply.com/62720

下面的HTML代码段：

                     <!-- Subnav bar -->                
                     <div class="subnav subnav-fixed">
                        <ul class="nav nav-pills">
                           <li><a href="#overview">Overview</a></li>
                           <li><a href="#opening-hours">Opening hours</a></li>

                        </ul>
                     </div>
<section id="Overview">          
<h3>OVERVIEW</h3>

由于

Answer 1

非常简单容易让“#subnav”成为“.subnav a”的错误首先是因为subnav是类，其次是因为你希望点击绑定到链接

Answer 2

这样的东西会起作用。当没有offset（）

时，这将设置为0

$('.subnav li a').bind('click', function(e) {
    e.preventDefault();

    var hashTag = this.hash;
    var top = 0;

    if ($(hashTag).offset()) {
        top = $(hashTag).offset().top
    }

    $('html, body').animate({scrollTop:top}, 'slow');                                                         
});

以下是更新：http://bootply.com/62723

如何使用scollTop函数启用Bootstrap的平滑滚动？

2 个答案: