如何在另一节FullPage.js上滚动一节

时间:2016-02-16 14:10:24

标签: jquery html css fullpage.js

我最近和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>

http://pastebin.com/vci66R6c

我不知道该怎么办,任何帮助都将不胜感激!

格尔茨,

0 个答案:

没有答案