jquery bootstrap scrollspy 滚动监听, 及a标签点击事件处理

最新推荐文章于 2024-08-24 18:01:21 发布

睡不醒的猫

最新推荐文章于 2024-08-24 18:01:21 发布

阅读量870

点赞数

本文链接：https://blog.csdn.net/transition164/article/details/82493451

版权

不使用a标签锚点链接；而是用animate（scrollTop）跳转,scrollTop可以设置距顶端的距离.animate({scrollTop: });

<!DOCTYPE html>
<html>
<body data-spy="scroll" data-target="#scroll-navbar" data-offset="90">
<div class="container-fluid pb50"> 
 <nav id="scroll-navbar" class="navbar-light navbar-detail">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-target="#section0" href="javascript:;">产品信息</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-target="#section1" href="javascript:;">所需材料</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-target="#section2" href="javascript:;">流程须知</a>
            </li>
        </ul>
    </nav>
<!-- 第1部分内容 -->
<div id="section0"></div>
<!-- 第2部分内容 -->
<div id="section1"></div>
<!-- 第3部分内容 -->
<div id="section2"></div>
</div>
</body>
</html>
<script>
$('.nav-link').click(function(){
    var fix = 82;
    var attr = $(this).attr('data-target');
    $("#scroll-navbar").css("position") == "relative";
    $("html,body").animate({scrollTop:$(attr).offset().top - fix});
    return false;  //必须要
})
</script>