一、首先需要引入jq和bs.js
<script src="jquery-2.2.3.min.js"></script>
<script src="bootstrap.js"></script>
有兴趣的朋友,可以去BS官网把对应滚动监听的js拉取下来,避免过于沉重
$('li a').bind('click', function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - $('.nav').height()
}, 500);
console.log($(this.hash))
});
二、css
body{
height:2000px;
background-color: aquamarine;
}
.nav{
position: fixed;
top:0;
}
h1{
margin: 200px 0;
}
三、DOM结构
data-spy="scroll" 指代滚动被监听的
data-target=".navbar-example" 里面可以是ID和Class,但必须与导航栏最外层附近的ID和Class保持一致
data-offset="20" 指距离顶部偏差
<body data-spy="scroll" data-target=".navbar-example" data-offset="20">
<div class="navbar-example">
<ul class="nav nav-tabs">
<li><a href="#ios">iOS</a></li>
<li><a href="#svn">SVN</a></li>
<li><a href="#sql">sql</a></li>
<li><a href="#html">html</a></li>
<li><a href="#php">php</a></li>
</ul>
</div>
<h1 id="ios">ios</h1>
<h1 id="svn">svn</h1>
<h1 id="sql">sql</h1>
<h1 id="html">html</h1>
<h1 id="php">php</h1>
</body>
就是这么简单
(完)
网友评论