smooth scroll with mousewheel to next or previous div

html scroll mouse mousewheel smoothing

12,642

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.

This seems to work fine: 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();
    });
});

12,642

billy beach

Updated on June 04, 2022

Comments

billy beach almost 2 years

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...

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.

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

Best regards,

Billy Beach

Dear lalibi,

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>

billy beach over 12 years

hey lalibi, Thanks for your answer. But I don't seem to get it work. This is the code I used: (see above) thanks
clestcruz almost 10 years

Been looking for this kind of feature and would like to apply this on my current project but the problem is it doesn't seem to work on the updated jquery(1.10). This feature will only work on jquery(1.6.4)
Muhammad Umer over 8 years

on mac air laptop it's a mess