Прокрутка относительно текущей позиции JQuery

Question

Я пытаюсь прокрутить div относительно текущей позиции при нажатии на элемент с помощью jquery. Но он должен прокручиваться после 3000 миллисекунд, поэтому попытался отложить его. Теперь он прокручивает 300 px по сравнению с верхним immidiatly после нажатия. если я нажму снова, ничего не произойдет.

это код до сих пор:

$('#scroll').click(function(){    
      $('.vluchtelinginfo').delay(3000).scrollTop(+300); 
     }); 

Спасибо за помощь.

Answer 1

Это не то, как delay() работ.

В вашем случае, используйте

setTimeout(function() { 
    $('.vluchtelinginfo').scrollTop(+300); 
}); 

За документацию для delay()

только последующих событий в очереди с задержкой; например, это будет , не задерживая формы без аргументов .show() или .hide(), которые не используют , используют очередь эффектов. рекомендация

Answer 2

Вы могли бы попробовать что-то вроде этого ...

$("#scroll").click(function() { 
    setTimeout(function() { 
     $(".vluchtelinginfo").css("top", $(".vluchtelinginfo").offset().top + 300); 
    }, 3000); 
}); 

Answer 3

Брэда M в об использовании setTimeout является одним из способов, чтобы получить то, что вы хотите. scrollTop() не входит в число «эффекта», предоставляемого jQuery, и поэтому на него не влияет delay(), потому что delay() влияет только на эффекты.

Однако, можно использовать animate() сделать эффект из прокруткой, например, следующие должны анимировать скроллинг:

$scrollable.animate({scrollTop: x}); 

Поскольку animate() является «эффект», она должна быть затронута delay() , Таким образом, вы можете сделать:

$scrollable.delay(3000).animate({scrollTop: x}); 

Однако, есть еще одна проблема, вы столкнулись с: когда scrollTop(x) называется x является абсолютное значение, не родственник один. Вызов scrollTop(+300) в точности совпадает с вызовом scrollTop(300). Символ + не имеет особого значения в этом контексте. Если вы хотите, чтобы ваша прокрутка была относительной, вам нужно сначала получить предыдущее значение scrollTop и добавить к нему относительное расстояние, которое вы хотите прокрутить. Например,

$scrollable.delay(3000).animate({scrollTop: $scrollable.scrollTop() + 300}); 

Это fiddle ставит вышеуказанные принципы работы.