Having recently written a simple smooth scrolling function using the jQuery mousewheel extension, I found myself facing a challenge due to my lack of experience with $.mousewheel.
The gist of my issue is that when the "south delta" is triggered, I invoke an $.animate function that scrolls to a specific class named .anchor.
A simplified version of the HTML code:
<div id="static-section" class="anchor"></div> <!-- width: 100%; height: 258px -->
<div id="alt-section" class="anchor"></div> <!-- width: 100%; height: 346px -->
The associated jQuery code:
$(document).ready(function() {
$("body").mousewheel(function(event, delta, deltaX, deltaY) {
if( delta > 0 ) {
console.log("North: " + delta);
}
else if( delta < 0 ) {
console.log("South: " + delta);
// ANIMATE TO ANCHOR FUNCTION
$("html,body").animate({scrollTop: $(".anchor").offset().top}, "slow");
}
return false;
});
});
In summary: My current dilemma involves the animation only targeting the first instance of the .anchor class (which corresponds to
#static-section</code). Despite attempting to use <code>scrollTop: $(".anchor").next().topfor loop as well, but encountered no success. Since I haven't utilized for loops frequently, there's uncertainty regarding whether my approach was correct. Any assistance on this matter would be greatly appreciated!
Note: Unfortunately, jsFiddle (with identical code to my site) doesn't accurately showcase the issue I'm encountering, so a live demo isn't available. If needed, I can provide the URL upon request. :-)