我最近和FullPage.js
搞砸了,在滚动时我无法弄清楚如何让一个部分滚动到上一部分。
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['1', '2', '3', '4'],
menu: '#menu',
css3: true,
scrollingSpeed: 1000
});
});
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.section{
text-align:center;
position: relative;
}
#menu{
text-align:center;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:inline-block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
#firstPage{
background: url('http://res2.windows.microsoft.com/resbox/en/windows/main/34294dee-9b34-4183-9a63-920d1ce467eb_4.jpg');
z-index: 0;
}
#secondPage{
background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/10174d64-e947-443e-93d5-6806d64e0eda_4.jpg');
z-index: 5;
}
#thirdPage{
background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/4cee3e54-7fa6-4665-a65e-79087a111197_4.jpg');
z-index: 10;
}
#fourthPage{
background: url('http://res2.windows.microsoft.com/resbox/en/windows/main/01fdadc8-e0e2-46a2-aac8-50b174f40cca_4.jpg');
z-index: 15;
}
<link href="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/vendors/jquery.slimscroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/vendors/jquery.easings.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<ul id="menu">
<li data-menuanchor="1" class="active"><a href="#1">First section</a></li>
<li data-menuanchor="2"><a href="#2">Second section</a></li>
<li data-menuanchor="3"><a href="#3">Third section</a></li>
<li data-menuanchor="4"><a href="#4">Fourth section</a></li>
</ul>
<div id="fullpage">
<div class="section " id="firstPage">
<div class="intro">
<h1>Hey</h1>
</div>
</div>
<div class="section" id="secondPage">
<div class="intro">
<h1>You</h1>
</div>
</div>
<div class="section" id="thirdPage">
<div class="intro">
<h1>There</h1>
</div>
</div>
<div class="section" id="fourthPage">
<div class="intro">
<h1>omg</h1>
</div>
</div>
</div>
我不知道该怎么办,任何帮助都将不胜感激!
格尔茨,