FullPage.js自动向上滚动

时间:2017-05-19 19:25:32

标签: javascript html css fullpage.js

我在我的项目中使用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,
});

2 个答案:

答案 0 :(得分:1)

我发现了问题,结果证明它是fitToSection。 我只需要通过fitToSection将其关闭:初始化期间为false

答案 1 :(得分:0)

根据文件here

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

或其中之一:

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

如果在初始化fullPage.js时truefalse,则需要将其放在ItemTemplate上。