FullPage.js 自动向上滚动

FullPage.js auto up scroll

我在我的项目中使用 fullPage.js,我不知道为什么,但是当我到达某个部分的底部时,fullPage.js 会自动再次将我向上滚动到我的网站顶部。 有没有网页可以打开这个功能? 谢谢。

更新:我注意到的最后一件事是 fullPage.js 试图将我滚动到最近的部分,因为当我将空白部分添加到我现有的部分并在它附近滚动时,fullpage.js 会自动滚动我到底部的那个

这是我的 html 代码,用于

部分
<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>

这是我的javascript初始化

$('#fullpage').fullpage({
  // direction: 'horizontal',
  css3: true,
  // scrollBar: true,
  autoScrolling: false,
  loopBottom: false,
  continuousVertical: false,
});

根据文档 here

loopBottom:(默认为 false)定义在最后一节中向下滚动是否应滚动到第一节。

或者:

continuousVertical:(默认 false)定义是在最后一部分向下滚动还是应该向下滚动到第一部分,如果在第一部分向上滚动应该向上滚动到最后一部分。与站点中存在的 loopTop、loopBottom 或任何滚动条不兼容(scrollBar:true 或 autoScrolling:false)。

如果在fullPage.js的初始化中是true,则需要将其放在false上。

我找到问题了,原来是fitToSection。 我只需要在初始化期间通过 fitToSection: false 将其关闭