Javascript FullPage.js自动向上滚动
我在我的项目中使用fullPage.js，我不知道为什么，但当我到达某个部分的底部时，fullPage.js会自动将我再次滚动到我的网页顶部。 有什么网站可以实现这个功能吗？ 谢谢 更新：我注意到的最后一件事是fullPage.js试图将我滚动到最近的部分，因为当我将空部分添加到现有部分并滚动到其附近时，fullPage.js会自动将我滚动到底部的部分 这是我的html代码，用于该部分Javascript FullPage.js自动向上滚动,javascript,html,css,fullpage.js,Javascript,Html,Css,Fullpage.js,我在我的项目中使用fullPage.js，我不知道为什么，但当我到达某个部分的底部时，fullPage.js会自动将我再次滚动到我的网页顶部。 有什么网站可以实现这个功能吗？ 谢谢 更新：我注意到的最后一件事是fullPage.js试图将我滚动到最近的部分，因为当我将空部分添加到现有部分并滚动到其附近时，fullPage.js会自动将我滚动到底部的部分 这是我的html代码，用于该部分 <div class="container" id="fullpage">
<div class="container" id="fullpage">
<div class="section">
<div class="announce slide" id="announce">
<h1 class="tz-title-4 tzcolor-blue">
<span class="tzweight_Bold">Announcements</span>
</h1>
<div class="section_group" id="newsContainer">
</div>
<div class="clearfix"> </div>
<div class="holderNews text-center">
</div>
</div>
<div class="menu slide" id="menu">
<h2 class="tz-title-2">
<span class="tzweight_Bold">Menus</span>
</h2>
<div class="grid_1">
<div class="box_1">
<div class="col-md-3 menu_left">
<div class="menu_vertical">
<section class="accordation_menu">
<div>
<input id="label-1" name="lida" type="radio" checked/>
<label for="label-1" id="item1"><i class="ferme"> </i>Breakfast<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a1">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<ul class="news_list">
<li class="date">
<img src="assets/images/s1.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>1. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s2.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>2. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s3.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>3. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s4.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>4. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
</div>
</div>
<div>
<input id="label-2" name="lida" type="radio"/>
<label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i>Launch<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a2">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<ul class="news_list">
<li class="date">
<img src="assets/images/s1.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>1. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s2.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>2. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s3.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>3. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s4.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>4. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
</div>
</div>
<div>
<input id="label-3" name="lida" type="radio"/>
<label for="label-3" id="item3"><i class="icon-trophy" id="i3"></i>Dinner<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
<div class="content" id="a3">
<div class="scrollbar" id="style-2">
<div class="force-overflow">
<ul class="news_list">
<li class="date">
<img src="assets/images/s1.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>1. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s2.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>2. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s3.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>3. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
<ul class="news_list">
<li class="date">
<img src="assets/images/s4.jpg" class="img-responsive" alt=""/>
</li>
<li class="date_desc">
<h5>4. Menu</h5>
<p>Bacon and eggs , pancakes , Olive Oil ..</p>
</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="col-md-9 menu_right">
<h4>Breakfast</h4>
<div class="grid_2" id="menuContainer">
</div>
</div>
<div class="clearfix"> </div>
<div class="holderMenu text-center">
</div>
</div>
<h2 class="tz-title-3">
<!-- <span class="tzweight_Bold">Special Days</span> -->
</h2>
<div class="box_2">
<!-- <div class="col-md-3">
<div class="row_1">
<h3>Sunday</h3>
<h4>19</h4>
<h3>April</h3>
<div class="border"> </div>
<h5>Birthday Celebrations</h5>
</div>
</div> -->
<!-- <div class="col-md-4">
<div class="column_right_grid calender">
<div class="cal1"><div class="clndr"><div class="clndr-controls"><div class="clndr-control-button"><p class="clndr-previous-button">previous</p></div>
<div class="month">March 2014</div><div class="clndr-control-button rightalign"><p class="clndr-next-button">next</p></div></div>
<table class="clndr-table" border="0" cellspacing="0" cellpadding="0"><thead><tr class="header-days">
<td class="header-day">Sun</td><td class="header-day">Mon</td><td class="header-day">T</td><td class="header-day">W</td><td class="header-day">T</td>
<td class="header-day">F</td><td class="header-day">S</td></tr></thead><tbody><tr><td class="day past adjacent-month last-month calendar-day-2014-02-23">
<div class="day-contents">23</div></td><td class="day past adjacent-month last-month calendar-day-2014-02-24"><div class="day-contents">24</div></td>
<td class="day past adjacent-month last-month calendar-day-2014-02-25"><div class="day-contents">25</div></td>
<td class="day past adjacent-month last-month calendar-day-2014-02-26"><div class="day-contents">26</div></td>
<td class="day past adjacent-month last-month calendar-day-2014-02-27"><div class="day-contents">27</div></td><td class="day past adjacent-month last-month calendar-day-2014-02-28"><div class="day-contents">28</div></td><td class="day past calendar-day-2014-03-01"><div class="day-contents">1</div></td></tr><tr><td class="day past calendar-day-2014-03-02"><div class="day-contents">2</div></td><td class="day past calendar-day-2014-03-03"><div class="day-contents">3</div></td><td class="day past calendar-day-2014-03-04"><div class="day-contents">4</div></td><td class="day past calendar-day-2014-03-05"><div class="day-contents">5</div></td><td class="day past calendar-day-2014-03-06"><div class="day-contents">6</div></td><td class="day past calendar-day-2014-03-07"><div class="day-contents">7</div></td><td class="day past calendar-day-2014-03-08"><div class="day-contents">8</div></td></tr><tr><td class="day past calendar-day-2014-03-09"><div class="day-contents">9</div></td><td class="day past event calendar-day-2014-03-10"><div class="day-contents">10</div></td><td class="day past event calendar-day-2014-03-11"><div class="day-contents">11</div></td><td class="day past event calendar-day-2014-03-12"><div class="day-contents">12</div></td><td class="day past event calendar-day-2014-03-13"><div class="day-contents">13</div></td><td class="day past event calendar-day-2014-03-14"><div class="day-contents">14</div></td><td class="day past calendar-day-2014-03-15"><div class="day-contents">15</div></td></tr><tr><td class="day past calendar-day-2014-03-16"><div class="day-contents">16</div></td><td class="day past calendar-day-2014-03-17"><div class="day-contents">17</div></td><td class="day past calendar-day-2014-03-18"><div class="day-contents">18</div></td><td class="day past calendar-day-2014-03-19"><div class="day-contents">19</div></td><td class="day past calendar-day-2014-03-20"><div class="day-contents">20</div></td><td class="day past event calendar-day-2014-03-21"><div class="day-contents">21</div></td><td class="day past event calendar-day-2014-03-22"><div class="day-contents">22</div></td></tr><tr><td class="day past event calendar-day-2014-03-23"><div class="day-contents">23</div></td><td class="day past calendar-day-2014-03-24"><div class="day-contents">24</div></td><td class="day today calendar-day-2014-03-25"><div class="day-contents">25</div></td><td class="day calendar-day-2014-03-26"><div class="day-contents">26</div></td><td class="day calendar-day-2014-03-27"><div class="day-contents">27</div></td><td class="day calendar-day-2014-03-28"><div class="day-contents">28</div></td><td class="day calendar-day-2014-03-29"><div class="day-contents">29</div></td></tr><tr><td class="day calendar-day-2014-03-30"><div class="day-contents">30</div></td><td class="day calendar-day-2014-03-31"><div class="day-contents">31</div></td><td class="day adjacent-month next-month calendar-day-2014-04-01"><div class="day-contents">1</div></td><td class="day adjacent-month next-month calendar-day-2014-04-02"><div class="day-contents">2</div></td><td class="day adjacent-month next-month calendar-day-2014-04-03"><div class="day-contents">3</div></td><td class="day adjacent-month next-month calendar-day-2014-04-04"><div class="day-contents">4</div></td><td class="day adjacent-month next-month calendar-day-2014-04-05"><div class="day-contents">5</div></td></tr></tbody></table></div></div>
</div>
</div> -->
<!-- <div class="col-md-5 row_2">
<img src="assets/images/pic9.jpg" class="img-responsive" alt=""/>
<ul class="cake_hover">
<li><a href="#"> <i class="fb"> </i>Share </a><div class="clearfix"> </div></li>
<li><a href="#"> <i class="tw"> </i>Share </a><div class="clearfix"> </div></li>
</ul>
</div> -->
<!-- <div class="clearfix"> </div> -->
</div>
</div>
</div>
<div class="gallery slide" id="gallery">
<h3 class="tz-title-2">
<span class="tzweight_Bold">Gallery</span>
</h3>
<div class="gallery_box">
<div class="col_1_of_5 span_1_of_5 grid_3">
<img src="assets/images/g1.jpg" class="img-responsive" alt=""/>
</div>
<div class="col_1_of_5 span_1_of_5 grid_3">
<img src="assets/images/g2.jpg" class="img-responsive" alt=""/>
</div>
<div class="col_1_of_5 span_1_of_5 grid_3">
<img src="assets/images/g3.jpg" class="img-responsive" alt=""/>
</div>
<div class="col_1_of_5 span_1_of_5 grid_3 last">
<img src="assets/images/g4.jpg" class="img-responsive" alt=""/>
</div>
<div class="col_1_of_5 span_1_of_5 grid_3">
<img src="assets/images/g5.jpg" class="img-responsive" alt=""/>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="about slide" id="about">
<h3 class="tz-title-2">
<span class="tzweight_Bold">About</span>
</h3>
<div class="about_desc">
<!-- <img src="assets/images/logo.png" alt=""/>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
<p class="about_para">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p> -->
</div>
</div>
<div class="contact slide" id="contact">
<h3 class="tz-title-2">
<span class="tzweight_Bold">Contact</span>
</h3>
<div class="contact_box">
<!-- <div class="col-md-6 contact_form">
<form>
<div class="column_2">
<input type="text" class="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" class="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" style="margin-left:2.7%">
</div>
<div class="column_3">
<textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message:</textarea>
</div>
<div class="form-submit1">
<label class="btn btn-primary btn-normal btn-inline " target="_self"><input type="submit" value="Send"></label>
</div>
<div class="clearfix"> </div>
</form>
</div>
<div class="col-md-6">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3150859.767904157!2d-96.62081048651531!3d39.536794757966845!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1408111832978"> </iframe>
</div>
</div>
<div class="clearfix"> </div> -->
</div>
</div>
</div>
</div>
根据文件
loopBottomcontinuousVertical如果在初始化fullPage.js时为
truefalse我只需要在初始化过程中通过fitToSection:false将其关闭我在初始化过程中已经将这两个选项都设置为false，但当我到达该部分的末尾时，它会滚动到顶部
$('#fullpage').fullpage({
// direction: 'horizontal',
css3: true,
// scrollBar: true,
autoScrolling: false,
loopBottom: false,
continuousVertical: false,
});