我想在我的网站上获得一个JavaScript,所以当一个人在网站上滚动时,它会自动滚动到下一个或以前的Div与某个类。我正在使用smoothscroll和scrollto。我还发现了两个我试图合并的代码。但我似乎并不了解整个脚本...平滑滚动鼠标滚轮到下一个或上一个div
第一个脚本是从http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery。这个脚本可以通过按下一个或上一个按钮来在DIV(具有某个类)之间导航。
第二个脚本是从How to enforce a "smooth scrolling" rule for mousewheel, jQuery?(最后发表),使滚动时可以使网站滚动(平滑)向下或向上一定量的像素。
我想将这两者结合起来,但对我来说并不是那么简单:/ 如果有人能指出我该如何做到这一点,那将会很好。由于
最好的问候,
比利海滩
亲爱lalibi,
谢谢您的回答。我试过你的代码,但似乎没有得到它的工作。下面是我使用的代码:
<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>
哎lalibi, 谢谢您的回答。但我似乎没有得到它的工作。 这是我使用的代码:(见上)谢谢 –
当您访问jsfiddle页面时,示例没有工作吗? – lalibi
一直在寻找这种功能,并希望将其应用于我当前的项目,但问题是它似乎并没有在更新的jQuery(1.10)上工作。此功能将只适用于jQuery(1.6.4) – clestcruz