Я пытаюсь оживить во время прокрутки, но мне не повезло с моим кодом...
У меня есть этот jquery
$(window).scrollTop(200);
Теперь вам нужно дать эффект анимации
Так что попробовали, но не работали:
1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);
Я применил это в функции щелчка следующим образом:
$('.goto').click(function(){
$(window).scrollTop(485); // its working
});
И теперь я хочу дать эффект анимации, но не работает...
Вы должны использовать $('html,body') вместо $(window), потому что window не имеет свойства scrollTop.
JQuery
$('html,body').animate({scrollTop: 485}, 2000);
Update:
$('html,body') работает в chrome, firefox, safari.
$('body') работает в хромированном и сафари.
$('html') работает в firefox.
если у вас высота html и body style: 100%; это не работает используйте
height: auto;
min-height: 100%;
<html>
function scrollmetop(dest){
var stop = $(dest).offset().top;
var delay = 1000;
$('body,html').animate({scrollTop: stop}, delay);
return false;
}
scrollmetop('#test');
<body>
<div style="margin: 100px 100px 1000px 100px">
<div id="test" style="width: 100px; height: 100px; border: 3px solid black;">target object</div>
</div>
</body>
</html>
Я использую Angular и пытаюсь перейти к элементу, добавленному в ng-repeat. Я помещаю этот код внутри $timeout (с нулевым временем, просто чтобы это произошло после отображения элементов), и этого было достаточно для того, чтобы новый элемент имел offset().top...
... но я думаю, что слишком много продолжалось добавление десятков новых элементов, поэтому у него не было возможности обработки прокрутки-анимации. Когда я установил время ожидания до 1 секунды, он работал (хотя на самом деле это заняло 7 секунд до того, как был вызван тайм-аут).
Я пришел к выводу, что анимированная, гладкая прокрутка на самом деле не может быть приемлемой здесь, и вместо этого я просто использую
document.body.scrollTop = entry.offset().top
вам просто нужно добавить пиксель
$('body').animate({ scrollTop: "300px" }, 1000);