点击导航目录页面滑动到指定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

浙公网安备 33010602011771号