lisse de défilement avec la molette de la souris au suivant ou au précédent div

Je vais essayer d'obtenir un javascript sur mon site alors, quand une personne fait défiler sur le site, il défile automatiquement à la suivante ou précédente de Div avec une classe certaine. Je travaille avec smoothscroll et scrollto. J'ai aussi trouvé deux codes que j'essaie de combiner. Mais je ne semblent pas comprendre l'ensemble des scripts...

Le premier script est de http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery. Ce script permet de naviguer entre les DIV (avec une certaine classe) en appuyant sur suivant ou précédent.

Le second script est de Comment appliquer un "scrolling" la règle de la roulette de la souris, jQuery? (dernier post) et il est possible de faire le site web de défilement (lisse) vers le bas ou vers le haut pour un certain nombre de pixels lors du défilement.

J'ai voulu combiner ces deux, mais ce n'est pas vraiment simple pour moi :/
Ce serait sympa si quelqu'un pouvait m'indiquer comment faire. Grâce

Cordialement,

Billy Plage

Cher lalibi,

Merci pour votre réponse. J'ai essayé ton code, mais ne semblent pas à le faire fonctionner. Voici le code que j'ai utilisé:

<head>
<script type="text/javascript" src="Box/jquery.js"></script>
<SCRIPT src="Box/jquery.min.js"></SCRIPT>
<SCRIPT src="Box/jquery.scrollTo-1.4.2-min.js"></SCRIPT>
<SCRIPT src="Box/jquery.localscroll-1.2.7-min.js"></SCRIPT>
<script type="text/javascript" src="Box/jquery.mousewheel.min.js"></script> 
<style type="text/css">
<!--
div {
border: 1px solid black;
height: 50px;
}
div.current {
background-color: orange;
}
-->
</style>
<script type="text/javascript"> 
var current 
$(function() {          
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
</script> 
</head>
<body>
<div class="current" id="div">1</div>
<div id="div">2</div>
<div id="div">3</div>
<div id="div">4</div>
<div id="div">5</div>
<div id="div">6</div>
<div id="div">7</div>
<div id="div">8</div>
<div id="div">9</div>
<div id="div">10</div>
<div id="div">11</div>
<div id="div">12</div>
<div id="div">13</div>
<div id="div">14</div>
<div id="div">15</div>
<div id="div">16</div>
<div id="div">17</div>
<div id="div">18</div>
<div id="div">19</div>
<div id="div">20</div>
<div id="div">21</div>
<div id="div">22</div>
<div id="div">23</div>
<div id="div">24</div>
<div id="div">25</div>
<div id="div">26</div>
<div class="current" id="div">27</div>
<div id="div">28</div>
<div id="div">29</div>
<div id="div">30</div>
<div id="div">31</div>
<div id="div">32</div>
<div id="div">33</div>
<div id="div">34</div>
<div id="div">35</div>
<div id="div">36</div>
<div id="div">37</div>
<div id="div">38</div>
<div id="div">39</div>
<div id="div">40</div>
<div id="div">41</div>
<div id="div">42</div>
<div id="div">43</div>
<div id="div">44</div>
<div id="div">45</div>
<div id="div">46</div>
<div id="div">47</div>
<div id="div">48</div>
<div id="div">49</div>
<div id="div">50</div>
<div id="div">51</div>
<div id="div">52</div>
<div id="div">53</div>
<div id="div">54</div>
<div id="div">55</div>
<div id="div">56</div>
<div class="current" id="div">57</div>
</body>
</html>

OriginalL'auteur billy beach | 2011-11-17

  1. 1

    MODIFIER: j'ai modifié la tripoter un peu. L'un des deux scripts externes a l'aide de http: et depuis le lien (avant modification) utilisé https:, Chrome bloqué, sauf si vous avez appuyé sur la petite icône en forme de bouclier. J'ai également mis à jour à la dernière version.

    Cela semble bien fonctionner: http://jsfiddle.net/9Amdx/1707/

    var current;
$(function() {          
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
    hey lalibi, Merci pour votre réponse. Mais je ne semble pas le faire fonctionner. C'est le code que j'ai utilisé: (voir ci-dessus) merci
    Ne pas l'exemple de travail lorsque vous visitez le jsfiddle page?
    Été à la recherche pour ce genre de fonctionnalité et que vous souhaitez postuler sur mon projet en cours, mais le problème c'est que cela ne semble pas fonctionner sur la mise à jour de jquery(1.10). Cette fonctionnalité ne fonctionne que sur jquery(1.6.4)
    Ce n'est pas de travailler sur jquery nouveaux vertions
    sur mac air portable c'est un gâchis

    OriginalL'auteur lalibi