码迷,mamicode.com
首页 > 其他好文 > 详细

点击导航目录页面滑动到指定div区域

时间:2019-01-31 17:10:22      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:vba   ack   targe   lan   set   fun   模块   click   .com   

$(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

 

点击导航目录页面滑动到指定div区域

标签:vba   ack   targe   lan   set   fun   模块   click   .com   

原文地址:https://www.cnblogs.com/zincredible/p/10342310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!