文章内容
分享一个使用jquery.navScroll实现动画滚动到页面的某个部分简单案例代码
html代码
<style>
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
a
{
color: #333;
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
h1, h2, h3, h4, h5, h6
{
font-weight: normal;
}
.container
{
margin: 0px auto;
width: 1440px;
}
body
{
height: 5000px;
}
.clearfix::after
{
content: "";
display: table;
clear: both;
}
.banner
{
height: 350px;
background: #08a8a0;
}
.nav-height
{
height: 90px;
background: #f7f6f4;
position: relative;
}
.nav-wrap.navFix
{
position: fixed;
top: 0;
left: 0;
z-index: 99999;
height: 90px;
background: #f7f6f4;
width: 100%;
box-shadow: 0 0 5px rgba(0,0,0, 0.2);
}
.nav-wrap ul
{
display: table !important;
margin: 0 auto;
}
.nav-wrap li
{
float: left;
line-height: 90px;
position: relative;
}
.nav-wrap li a
{
font-size: 18px;
padding: 0 40px;
}
.nav-wrap li::before
{
content: "|";
position: absolute;
display: block;
right: 0;
color: #808080;
}
.nav-wrap li:last-child::before
{
display: none;
}
.nav-wrap li a.active
{
position: relative;
}
.nav-wrap li a.active::after
{
content: "";
position: absolute;
width: 80px;
height: 3px;
bottom: -10px;
background: #08a8a0;
left: 50%;
margin-left: -40px;
}
.ny_title_1
{
overflow: hidden;
padding-top: 30px;
margin-bottom: 20px;
}
.ny_title_1 h2
{
font-weight: 300;
font-size: 36px;
line-height: 1.2;
color: #000;
}
.ny_title_1 p
{
text-transform: uppercase;
font-size: 26px;
color: #000;
position: relative;
line-height: 2.8;
margin-top: -10px;
}
.ny_title_1 p::after
{
content: "";
position: absolute;
display: block;
height: 3px;
width: 80px;
background: #08a8a0;
left: 0;
bottom: 0;
}
.ny_title_1 em
{
font-style: normal;
font-size: 24px;
line-height: 1.4;
color: #000;
padding: 15px 0;
display: block;
}
.section-content
{
margin-bottom: 60px;
min-height:450px;
}
.p p
{
font-size: 16px;
color: #454545;
line-height: 30px;
}
</style>
<div class="banner">
</div>
<div class="nav-height" id="navHeight">
<nav class="nav-wrap" id="nav-wrap">
<ul class="clearfix">
<li><a class="active" href="#section1">栏目一</a></li>
<li><a href="#section2">栏目二</a></li>
<li><a href="#section3">栏目三</a></li>
</ul>
</nav>
</div>
<div id="section1" class="section-content ">
<div class="container">
<div class="ny_title_1">
<h2>
栏目一</h2>
<em>jquery.navScroll.js参数说明</em>
</div>
<div class="p">
<ul class=" list-paddingleft-2">
<li>
<p>
scrollTime 滚动到该元素所需的时间（以毫秒为单位）（将其设置为 0，因此显然不会显示动画）Integer 500。</p>
</li>
</ul>
</div>
</div>
</div>
<div id="section2" class="section-content ">
<div class="container">
<div class="ny_title_1">
<h2>
栏目二</h2>
<em>jquery.navScroll.js参数说明</em>
</div>
<div class="p">
<ul class=" list-paddingleft-2">
<li>
<p>
scrollTime 滚动到该元素所需的时间（以毫秒为单位）（将其设置为 0，因此显然不会显示动画）Integer 500。</p>
</li>
</ul>
</div>
</div>
</div>
<div id="section3" class="section-content ">
<div class="container">
<div class="ny_title_1">
<h2>
栏目三</h2>
<em>jquery.navScroll.js参数说明</em>
</div>
<div class="p">
<ul class=" list-paddingleft-2">
<li>
<p>
scrollTime 滚动到该元素所需的时间（以毫秒为单位）（将其设置为 0，因此显然不会显示动画）Integer 500。</p>
</li>
</ul>
</div>
</div>
</div>
<script src="1.10.2/jquery.min.js"></script>
<script src="jquery.navScroll.js" type="text/javascript"></script>
<script>
//内容信息导航吸顶
$(document).ready(function () {
var navHeight = $("#navHeight").offset().top;
var navFix = $("#nav-wrap");
$(window).scroll(function () {
if ($(this).scrollTop() > navHeight) {
navFix.addClass("navFix");
}
else {
navFix.removeClass("navFix");
}
})
})
//内容信息导航锚点
$('.nav-wrap').navScroll({
mobileDropdown: true,
mobileBreakpoint: 420,
scrollSpy: true
});
</script>在线演示：演示
