I am trying to get javascript on my website, so when a person scrolls to a website, it automatically scrolls to the next or previous Div with a specific class. I work with smoothscroll and scrollto. I also found two codes that I am trying to combine. But I do not seem to understand all the scenarios ...
The first script is http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery . This script allows you to navigate between DIVs (with a specific class) by clicking next or previous.
Second script from How to provide "smooth scrolling", the rule for mousewheel, jQuery? (last post) and allows you to scroll the website (smoothly) up or down for a certain number of pixels when scrolling.
I wanted to combine these two, but it is not very straightforward for me: / It would be nice if someone could tell me how to do this. Thanks
Yours faithfully,
Billy beach
Dear Lalibi,
Thanks for your reply. I tried your code but it doesn't seem to 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>
source share