Question

我正在使用流行的jQuery scrollTo / localScroll插件来创建单页导航系统，该系统会自动将窗口滚动到各种锚标签。我有它没有问题，但我无法阻止它排队动画。

我有一个ID为'main_nav'的无序列表，我用它跳到锚点：

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

调用该函数时，有一个名为“stop”的参数，该参数应该通过jquery stop（）函数清除当前排队的动画。该插件中的参数默认为“true”，但无论如何我已经指定了它。该插件还默认引用窗口作为滚动目标。我这样调用函数：

$(document).ready(function() {
  $('#main_nav').localScroll({
    duration:2000,
    stop:true
  });
});

这有效，但忽略'stop'参数...如果我快速连续点击所有四个链接，页面将一个接一个地滚动到每个链接，总共需要8秒钟。不太理想！如果我将整个页面包装在容器div中，请给它一个高度，然后将其设置为overflow：scroll;然后使用localScroll函数定位此div，然后停止参数工作。例如，当这样调用时，不再有动画排队：

$(document).ready(function() {
  $('#main_nav').localScroll({
    target: $('#container'),
    duration:2000,
    stop:true
  });
});

当插件引用div作为要滚动的目标时，它可以执行jquery stop（）函数，但是当目标设置为'window'时，stop函数不起作用。 / p>

我已经尝试为窗口对象创建一个jQuery包装器，并将其作为目标引用，如下所示：

$(document).ready(function() {
  $('#main_nav').localScroll({
    target: $('window'),
    duration:2000,
    stop:true
  });
});

...但这也不起作用。在插件本身中，默认值为：

$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
};

有没有人对如何阻止动画提示有任何想法？

我正在使用： jQuery 1.6.1，scrollTo 1.4.2，localScroll 1.2.7

Answer 1

我试过

  $('.menu, .up, #send, #ok').localScroll({
    duration: 1800,
    stop: true,
    hash: true,
    onBefore: function(e, elem, $target) { // this = settings
      $target.stop();
    }
  });

但这不起作用

..然后我认为这可能是jQuery版本的问题（scrollTo和休息是从2009年开始）所以我已经回到jquery 1.2.6但仍然没有什么所以我感觉这可能是一个scrollTo插件问题

现在我将尝试仅使用.animate()

编写自己的scrollTo插件

Answer 2

我找到了它！

我不知道为什么对象窗口不能动画！在控制台中：

$(window).animate({ scrollTop: 110}, 1000);
TypeError
$('body').animate({ scrollTop: 110}, 1000);
[
<body>…</body>

要解决问题，只需将目标更改为正文

即可

target: $('body')

就是这样:)）

localscroll jQuery插件 - 动画排队问题

2 个答案: