localscroll jQuery plugin - animation queueing problem
I'm using the popular jQuery scrollTo / localScroll plugin to create a single page navigation system that automatically scrolls the window to various anchor tags. I have it working no problem, but am having trouble preventing it from queueing animation.
I have an unordered list with an id of 'main_nav' which I am using to skip to the anchor points:
<ul id="main_nav">
<li><a href="#one">One<a> </li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a> </li>
<li><a href="#four">Four</a> </li>
</ul>
When calling the function, there is a parameter called 'stop' which is supposed to clear any currently queued animations via the jquery stop() function. The parameter defaults to 'true' in the plugin, but I have specified it anyway. The plugin also defaults to referencing the window as the target for scrolling. I am calling the function like so:
$(document).ready(function() {
$('#main_nav').localScroll({
duration:2000,
stop:true
});
});
This works, but the 'stop' parameter is ignored... if I click all four links in quick succession, the page will scroll to each link one after the other, taking a total of 8 seconds to do so. Not ideal! If I wrap the whole page in a container div, give it a height, and set it to overflow:scroll; and then target this div with the localScroll function, then the stop parameter works. eg, when called like this there is no more animation queueing:
$(document).ready(function() {
$('#main_nav').localScroll({
ta开发者_如何学Pythonrget: $('#container'),
duration:2000,
stop:true
});
});
It seems that when the plugin references a div as the target to be scrolled, it is able to execute the jquery stop() function, but when the target is set to 'window' the stop function doesn't work.
I've tried creating a jQuery wrapper for the window object and referencing that as the target like so:
$(document).ready(function() {
$('#main_nav').localScroll({
target: $('window'),
duration:2000,
stop:true
});
});
... but this doesn't work either. In the plugin itself, the default values are:
$localScroll.defaults = {
duration:1000, // How long to animate.
axis:'y', // Which of top and left should be modified.
event:'click', // On which event to react.
stop:true, // Avoid queuing animations
target: window, // What to scroll (selector or element). The whole window by default.
reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling
};
Does anyone have any ideas on how to stop the animation from cueueing?
I'm using: jQuery 1.6.1, scrollTo 1.4.2, localScroll 1.2.7
I've try
$('.menu, .up, #send, #ok').localScroll({
duration: 1800,
stop: true,
hash: true,
onBefore: function(e, elem, $target) { // this = settings
$target.stop();
}
});
but this dons't work either
.. then I've thougth this can be jQuery version problem (scrollTo and rest are from 2009) so I've move back to jquery 1.2.6 and still nothing so I'm thingking this can be a scrollTo plugin problem
now i will try to write own scrollTo plugin using only .animate()
I FOUND IT!
I don't know why byt object window can't be animated! In console:
$(window).animate({ scrollTop: 110}, 1000);
TypeError
$('body').animate({ scrollTop: 110}, 1000);
[
<body>…</body>
To solve the problem just simply change target to body
target: $('body')
and this is it :)
加载中,请稍侯......
精彩评论