0

我正在使用流行的 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
  });
});

这可行，但“停止”参数被忽略...如果我快速连续单击所有四个链接，页面将一个接一个地滚动到每个链接，总共需要 8 秒。不理想！如果我将整个页面包装在一个容器 div 中，给它一个高度，并将其设置为溢出：滚动；然后使用 localScroll 函数定位这个 div，然后 stop 参数起作用。例如，当这样调用时，不再有动画排队：

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

似乎当插件引用一个 div 作为要滚动的目标时，它能够执行 jquery stop() 函数，但是当目标设置为“窗口”时，停止函数不起作用。

我尝试为窗口对象创建一个 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

4

2 回答 2

0

我试过了

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

但这也不起作用

..然后我认为这可能是 jQuery 版本问题（scrollTo 和 rest 是从 2009 年开始的）所以我已经回到 jquery 1.2.6 并且仍然没有，所以我想这可能是一个 scrollTo 插件问题

现在我将尝试仅使用编写自己的 scrollTo 插件.animate()

于 2011-08-15T08:56:29.440 回答
0

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>​…​&lt;/body>​

To solve the problem just simply change target to body

target: $('body')

and this is it :)

于 2011-08-15T09:32:05.597 回答