Scrolltop с анимацией не работает

Я пытаюсь оживить во время прокрутки, но мне не повезло с моим кодом...

У меня есть этот jquery

$(window).scrollTop(200);

Теперь вам нужно дать эффект анимации

Так что попробовали, но не работали:

1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);

Я применил это в функции щелчка следующим образом:

$('.goto').click(function(){
    $(window).scrollTop(485); // its working
});

И теперь я хочу дать эффект анимации, но не работает...

Ответ 1

Вы должны использовать $('html,body') вместо $(window), потому что window не имеет свойства scrollTop.

JQuery

$('html,body').animate({scrollTop: 485}, 2000);

JSFiddle

Update:

$('html,body') работает в chrome, firefox, safari.

$('body') работает в хромированном и сафари.

$('html') работает в firefox.

JSFiddle2

Ответ 2

если у вас высота html и body style: 100%; это не работает используйте

height: auto;
min-height: 100%;

Ответ 3

DEMO

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

Ответ 4

Я использую Angular и пытаюсь перейти к элементу, добавленному в ng-repeat. Я помещаю этот код внутри $timeout (с нулевым временем, просто чтобы это произошло после отображения элементов), и этого было достаточно для того, чтобы новый элемент имел offset().top...

... но я думаю, что слишком много продолжалось добавление десятков новых элементов, поэтому у него не было возможности обработки прокрутки-анимации. Когда я установил время ожидания до 1 секунды, он работал (хотя на самом деле это заняло 7 секунд до того, как был вызван тайм-аут).

Я пришел к выводу, что анимированная, гладкая прокрутка на самом деле не может быть приемлемой здесь, и вместо этого я просто использую

document.body.scrollTop = entry.offset().top

Ответ 5

вам просто нужно добавить пиксель

$('body').animate({ scrollTop: "300px" }, 1000);