平滑滾動鼠標滾輪到下一個或上一個div

我想在我的網站上獲得一個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>

來源

2011-11-17 billy beach

編輯：我調整了小提琴一點點。兩個外部腳本之一使用了http:，並且由於鏈接（編輯之前）使用了https:，除非您按下小盾牌圖標，否則Chrome會將其屏蔽。我也更新到最新版本。

這似乎很好地工作：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(); 
    }); 
});

來源

2011-11-17 16:26:26 lalibi

哎lalibi，謝謝您的回答。但我似乎沒有得到它的工作。這是我使用的代碼:(見上）謝謝 –

當您訪問jsfiddle頁面時，示例沒有工作嗎？ – lalibi

一直在尋找這種功能，並希望將其應用於我當前的項目，但問題是它似乎並沒有在更新的jQuery（1.10）上工作。此功能將只適用於jQuery（1.6.4） – clestcruz

平滑滾動鼠標滾輪到下一個或上一個div

回答

相關問題