Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript scrollTo #ID with mouse-wheel (jsfiddle attached)

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #37521
    Rugg
    Participant

    Hello,

    I am looking add mouse-wheel support to the ‘scrollTo’ method for scrolling to an ID or element. The attached jsfiddle seems to work partially, however, the mouse-wheel seems to scroll too far (skipping divs). If anybody can suggest a fix, that would be great. Thank You.

    http://jsfiddle.net/9Amdx/129/

    #100721
    Mottie
    Member

    Hi NSR!

    You could just add a flag which ignores mousewheel changes while the scroll animation occurs:

    var $current, flag = false;

    $(function() {
    $('body').mousewheel(function(event, delta) {
    if (flag) { return false; }
    $current = $('div.current');

    console.log(delta);
    console.log($current);

    if (delta > 0) {
    $prev = $current.prev();

    if ($prev.length) {
    flag = true;
    $('body').scrollTo($prev, 1000, {
    onAfter : function(){
    flag = false;
    }
    });
    $current.removeClass('current');
    $prev.addClass('current');
    }
    } else {
    $next = $current.next();

    if ($next.length) {
    flag = true;
    $('body').scrollTo($next, 1000, {
    onAfter : function(){
    flag = false;
    }
    });
    $current.removeClass('current');
    $next.addClass('current');
    }
    }

    event.preventDefault();
    });
    });​

    Update the mousewheel plugin to 3.0.6, I think that fixes the issue. There were some changes in jQuery 1.7+ which required the mousewheel update.

    #100773
    Mottie
    Member
    #100840
    Mottie
    Member

    Here is a demo of the final result of this thread. It’s a combination of the above updated demo with this one page nav demo.

    I thought I’d share it so others might benefit.

    #111923
    yabadabadoo
    Member

    Hey guys. I love this page and all your support.

    Im new at this and I never get to make it work on my pc. What am I doing wrong? I copy every part of the code in its tags, in the head or where it should. But it still doesn’t work. Am I missing something?

    Please HELP! Thanks

    Mau

    #111920
    pmac627
    Participant

    @yabadabadoo: Did you include the jQuery file necessary? v1.6.4? It is not shown in any of the windows on jsFiddle.

    #111941
    yabadabadoo
    Member

    Yes @pcmac627 I actually did. Not working thow.

    #111945
    yabadabadoo
    Member

    Well here I put so you can tell me what is wrong.
    [Test for scroll](http://testforscroll.comlu.com/6.html)

    #111946
    Mottie
    Member

    @yabadabadoo The order of script loading is incorrect. Load jQuery first:



    #111947
    yabadabadoo
    Member

    Thanks @Mottie ! as simple as that.

    #111955
    yabadabadoo
    Member

    Ok so to complete the idea now I tried to do the same with the combined example and I don’t get the mousewheel effect. Thanks again!

    [Test for scroll combined](http://testforscroll.comlu.com/7.html “”)

    By the way: is there a way to change what you see in the URL bar at the time you navegate the sections? Like when you get to the section 3 the URL says www. example. net/Section3

    #129613
    luuk1985
    Member

    Hey Mottie,

    Thanks for the script. I want to use in on my parallax style website so one automatically scrolls to the next div when using the mousewheel. A question though: what do I have to add in the script such that the effect is also triggered when using the arrow keys. Good examples of this i find:

    http://justsaytheword.com/
    http://onward.fiskerautomotive.com/en-us

    Thanks a million

    #188841
    irene
    Participant

    Hi Mottie,

    Your script is exactly what I’m looking for! When implementing it turned out not to work with higher versions of jquery though. Any idea what I should do to fix this?

    Thanks a lot!

    #188845
    irene
    Participant

    Never mind, I found the update for jquery.scrollTo.js, now it works :)

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘scrollTo #ID with mouse-wheel (jsfiddle attached)’ is closed to new replies.