Question

在我的下拉菜单中，我有2个链接，点击时应该采取（向上或向下平滑滚动 - 取决于用户所在页面的哪一部分）用户到相应的部分在页面上。

唯一的问题：什么都行不通。

HTML：

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li class = "dropdown active">  
                            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><span>Dropdown</span><b class = "caret"></b></a>
                            <ul class = "dropdown-menu">
                                <li><a href = "#subtab1">Subtab1</a></li>
                                <li><a href = "#subtab2">Subtab2</a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->

                    </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
                </div><!-- END: "container" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

        <div class="container pad-container">

            <div id = "subtab1">

                <h1>Subtab1</h1>
                <p>stuff...</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                 <p>lorem lorem</p>
            </div>

            <div id = "subtab2">

                <h1>Subtab2</h1>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
                <p>lorem lorem</p>
            </div>
        </div>

CSS：

.pad-container{
  padding-top:80px;
  padding-bottom:80px; /*height of the footer plus a little */
}

JS：

$( ".dropdown-menu > li > a" ).click(function() {
    $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top -  navHeight }, 750);
});

Answer 1

$( ".dropdown-menu > li > a" ).click(function (event) {
    event.preventDefault();
    $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top}, 750);
});

您可能还想尝试执行$(document).animate( ... )或限制为html或body进行测试。我暂时删除了navHeight var。

问题平滑滚动到特定div

1 个答案: