html - pretty - desplazamiento suave con mousewheel a div siguiente o anterior
resources demos external jquery mousewheel jquery mousewheel js (1)
Intento obtener un javascript en mi sitio, de modo que cuando una persona se desplaza por el sitio web, automáticamente se desplaza a la Div anterior o siguiente con una cierta clase. Estoy trabajando con smoothscroll y scrollto. También encontré dos códigos que estoy tratando de combinar. Pero parece que no entiendo todos los guiones ...
El primer script es de http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery . Esta secuencia de comandos permite navegar entre DIV (con una cierta clase) presionando siguiente o anterior.
El segundo script es de Cómo aplicar una regla de "desplazamiento suave" para mousewheel, jQuery? (última publicación) y hace que el sitio web se desplace (suavice) hacia abajo o hacia arriba para una cierta cantidad de píxeles al desplazarse.
Quería combinar estos dos pero no es muy directo para mí: / Sería bueno si alguien pudiera indicarme cómo hacer esto. Gracias
Atentamente,
Billy Beach
Querido Lalibi:
Gracias por tu respuesta. Probé tu código, pero parece que no funciona. Aquí está el código que utilicé:
<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>
EDITAR : Ajusté el violín un poco. Uno de los dos scripts externos usaba http: y dado que el enlace (antes de la edición) usaba https: Chrome lo bloqueó a menos que presionara el ícono del pequeño escudo. También actualicé a la última versión.
Esto parece funcionar bien: 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();
});
});