1
J'utilise fullPage.js sur mon projet, je ne sais pas pourquoi mais quand j'atteins le bas d'une section, fullPage.js me fait défiler automatiquement vers le haut de mon site. Existe-t-il un site web pour activer cette fonction? merci.FullPage.js auto up scroll
Mise à jour: la dernière chose que j'ai remarqué est que fullPage.js essaye de me faire défiler vers la section la plus proche, parce que quand j'ajoute une section vide à celle existante et la défile près, fullpage.js fond
ceci est mon code html, pour la section
<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>
Et ceci est mon initialisation javascript
$('#fullpage').fullpage({
// direction: 'horizontal',
css3: true,
// scrollBar: true,
autoScrolling: false,
loopBottom: false,
continuousVertical: false,
});
i mis deux à faux déjà dans mon initialisation, mais il est le défilement vers le haut quand j'atteins fin de la section – MaverickWells
S'il vous plaît envoyer votre code – threeFatCat
j'ai ajouté mon code déjà – MaverickWells