zoukankan      html  css  js  c++  java
  • 点击导航目录页面滑动到指定div区域

    $(document).on("click", ".navbar-nav li[link]", function() {
                nav.find('li').removeClass('active');
                $(this).addClass('active');
                //获取模块到顶部的距离 
                var id = $(this).attr("link")
                //获取顶部导航条高度
                var topH = $("#top-nav").height()
                var divH = $("#" + id).offset().top - topH
                $('html,body').animate({
                    scrollTop : divH
                }, 500);
    
            })
    <ul class="nav navbar-nav">
                    <li link="div1" class="active"><a href="#">产品展示</a></li>
                    <li link="div2"><a href="#">解决方案</a></li>
                    <li link="div3"><a href="#">新闻</a></li>
                    <li link="div4"><a href="#">帮助中心</a></li>
    </ul>
    <div id="div1" class="container" style="background: black;"">产品展示</div>
    <div id="div2" class="container" style="height: 500px; background-color: blue;">新闻</div>
    <div id="div3" class="container" style="height: 500px; background-color: green;">帮助中心</div>
    <div id="div4" class="container" style="height: 500px; background-color: gray;">意见反馈</div>

    参考 http://www.17sucai.com/pins/demo-show?id=9118

  • 相关阅读:
    vector与iterator的一些用法
    动态规划 hdu 1024
    dfs bfs hdu 1045
    hdu 2795
    poj 2828
    线段树染色
    线段树比大小
    A
    ?线程局部变量
    JRE、JDK、JVM 及 JIT
  • 原文地址:https://www.cnblogs.com/zincredible/p/10342310.html
Copyright © 2011-2022 走看看