Проблема с scrollTop - 30 секунд должны длиться, 29 секунд остаются на одном месте

Question

У меня есть 7 разделов на сайте (# section1, # section2, ...). В # section1 у меня есть кнопка #click_to_start. После нажатия на него, я должен перейти на нижнюю часть сайта (в нижний колонтитул #lastFooter), используя этот код

$("#click_to_start").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#lastFooter").offset().top
    }, 30000);
});

Движение от # section1 до нижней части страницы должно длиться 30 секунд (поскольку различные анимации, воспроизводимые во время прокрутки).

Проблема в том, что когда я нажимаю кнопку, я остаюсь на 29 секунд на # slide1 (анимации воспроизводятся очень и очень медленно), а затем на последнюю 1 секунду он просто бросает меня от # слайд1 до нижней части страницы.

Вот чернила для сайта: http://php.soulmates.company/main.php

На моем языке кнопка называется "Klikni pre prehrat ie". В меню также есть возможность изменить язык на английский sh, но не все переводится, и он возвращает вас к старому указателю. php, поэтому он сейчас бесполезен.

Answer 1

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

  $("html, body").animate({ scrollTop: $("#container").height() }, 30000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    
   <div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div>
</div>