Плагин localscroll jQuery - проблема с анимацией

Я использую популярный плагин jQuery scrollTo / localScroll для создания одностраничной навигационной системы, которая автоматически прокручивает окно к различным тегам привязки. У меня это работает без проблем, но у меня проблемы с предотвращением анимации в очереди.

У меня есть неупорядоченный список с идентификатором 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, задаю ей высоту и задаю для нее переполнение:scroll; и затем нацелить этот div с помощью функции localScroll, тогда работает параметр stop. например, при таком вызове анимация больше не стоит в очереди:

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

Кажется, что когда плагин ссылается на div в качестве цели для прокрутки, он может выполнить функцию jquery stop(), но когда для цели установлено значение "window", функция 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

Источник

2 ответа

Я НАШЕЛ ЭТО!

Я не знаю, почему окно объекта byt не может быть анимировано! В консоли:

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

Чтобы решить проблему, просто измените цель на тело

target: $('body')

и это все:)

Источник

Я попробую

  $('.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

Теперь я попытаюсь написать собственный плагин scrollTo, используя только .animate()

Источник
Другие вопросы по тегам