如何使用 scollTop 函数通过 Bootstrap 实现平滑滚动？答案

【问题标题】：How can I use the scollTop function to enable smooth scrolling with Bootstrap?如何使用 scollTop 函数通过 Bootstrap 实现平滑滚动？
【发布时间】：2013-05-31 11:52:14
【问题描述】：

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

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

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

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

但是，我似乎无法让它工作。我是否使用了错误的 # 参考？这是一个引导：http://bootply.com/62720

HTML sn-p 下面：

                     <!-- 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>

谢谢

【问题讨论】：

你能在 jsfiddle 或 jsbin 上演示你的问题吗？

标签： javascript twitter-bootstrap scrolltop smooth-scrolling

【解决方案1】：

非常简单的错误“#subnav”应该是“.subnav a”，首先是因为subnav是类，其次是因为您希望点击绑定到链接

【讨论】：

【解决方案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

【讨论】：