用鼠标滚轮平滑滚动到下一个或上一个div [英] smooth scroll with mousewheel to next or previous div
问题描述
我正在尝试在我的网站上获取JavaScript，因此当某人在网站上滚动时，它会自动滚动到具有特定类的下一个或上一个Div.我正在使用smoothscroll和scrollto.我还发现了两个要合并的代码.但是我似乎不太了解整个脚本...
I'm trying to get a javascript on my site so when a person scrolls on the website, it automatically scrolls to the next or previous Div with a certain class. I'm working with smoothscroll and scrollto. I also found two codes that I'm trying to combine. But I don't seem to understand the whole scripts...
第一个脚本来自 http://webdesignerwall.com/tutorials/scrollto-带有jQuery的帖子.通过此脚本，可以通过按下一个或上一个在DIV(具有特定类)之间进行导航.
The first script is from http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery. This script makes it possible to navigate between DIV's (with a certain class) by pressing next or previous.
第二个脚本来自如何实施平滑滚动"；鼠标滚轮的规则，是jQuery吗?(最新文章)，并可以在滚动时使网站上下滚动(平滑)一定数量的像素.
The second script is from How to enforce a "smooth scrolling" rule for mousewheel, jQuery? (last post) and makes it possible to make the website scroll (smooth) down or up for a certain amount of pixels when scrolling.
我想将两者结合起来，但对我来说并不是很简单:/ 如果有人可以指出我该怎么做，那就太好了.谢谢
I wanted to combine these two but it's not really straight forward for me :/ It would be nice if someone could point me how to do this. Thanks
最诚挚的问候，
比利海滩
亲爱的拉利比
感谢您的回答.我尝试了您的代码，但似乎无法正常工作.这是我使用的代码:
Thanks for your answer. I tried your code, but don't seem to get it work. Here is the code I used:
<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>
推荐答案
EDIT :我对小提琴做了一些调整.两个外部脚本之一使用的是http:，并且由于链接(在编辑之前)使用的是https:，因此除非您按下小盾牌图标，否则Chrome会阻止它.我还更新到了最新版本.
EDIT: I tweaked the fiddle a little bit. One of the two external scripts was using http: and since the link (before the edit) used https:, Chrome blocked it unless you pressed the little shield icon. I also updated to latest version.
这似乎很好用: 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();
});
});
这篇关于用鼠标滚轮平滑滚动到下一个或上一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
