Home › Forums › JavaScript › scrollTo #ID with mouse-wheel (jsfiddle attached)
- This topic is empty.
-
AuthorPosts
-
April 6, 2012 at 10:19 am #37521RuggParticipant
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.
April 6, 2012 at 5:30 pm #100721MottieMemberHi 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.
April 7, 2012 at 11:24 am #100773MottieMemberTry this:
https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js
and this updated demo using the newest jQuery.
April 8, 2012 at 10:10 am #100840MottieMemberHere 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.
October 15, 2012 at 2:40 pm #111923yabadabadooMemberHey 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
October 15, 2012 at 3:59 pm #111920pmac627Participant@yabadabadoo: Did you include the jQuery file necessary? v1.6.4? It is not shown in any of the windows on jsFiddle.
October 15, 2012 at 7:04 pm #111941yabadabadooMemberYes @pcmac627 I actually did. Not working thow.
October 15, 2012 at 7:26 pm #111945yabadabadooMemberWell here I put so you can tell me what is wrong.
[Test for scroll](http://testforscroll.comlu.com/6.html)October 15, 2012 at 7:32 pm #111946MottieMember@yabadabadoo The order of script loading is incorrect. Load jQuery first:
October 15, 2012 at 8:08 pm #111947yabadabadooMemberThanks @Mottie ! as simple as that.
October 15, 2012 at 9:54 pm #111955yabadabadooMemberOk 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
March 25, 2013 at 8:09 am #129613luuk1985MemberHey 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-usThanks a million
November 20, 2014 at 9:32 am #188841ireneParticipantHi 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!
November 20, 2014 at 10:19 am #188845ireneParticipantNever mind, I found the update for jquery.scrollTo.js, now it works :)
-
AuthorPosts
- The topic ‘scrollTo #ID with mouse-wheel (jsfiddle attached)’ is closed to new replies.