Как активировать бесплатную прокрутку обратно в верхнюю часть страницы после анимации прокрутки JavaScript (веб -разрабо ⇐ Javascript

[Anonymous]

У меня есть серия анимаций, которая заканчивается тем, что текст и изображение анимированы вверх (подумайте о повествовании Starwars). Однако, когда анимация будет завершена, я могу продолжать прокручивать страницу с другим контентом, но я не могу прокрутить обратно, чтобы перечитывать текст, который будет необходим. Кто -нибудь может помочь предоставить решение? Вот мой сценарий. < /p>
//PAGE TITLE FADE+SCROLL ANIMATION
document.addEventListener("DOMContentLoaded", function () {
const title = document.querySelector(".pagetitle");
const text = document.querySelector(".text");
const heroImage = document.querySelector(".hero");

title.style.opacity = "1";
text.style.opacity = "0";
heroImage.style.transform = "translateY(0)";
text.style.transform = "translateY(0)";

setTimeout(() => {
title.style.opacity = "0";
}, 2000);

setTimeout(() => {
text.style.opacity = "1";
text.style.transition = "opacity 1.5s ease-in-out";
}, 2500);

setTimeout(() => {
const textBottomOffset = text.getBoundingClientRect().bottom;
const windowHeight = window.innerHeight;
const distanceToMove = textBottomOffset - windowHeight;

heroImage.style.transition = "transform 3s ease-in-out";
text.style.transition = "transform 3s ease-in-out";
heroImage.style.transform = `translateY(-${distanceToMove}px)`;
text.style.transform = `translateY(-${distanceToMove}px)`;

// Enable scrolling after animation finishes
setTimeout(() => {
document.body.style.overflow = "auto";
}, 3000);
}, 4000);
});
< /code>
Я попытался изменить позиционирование CSS, а также анимацию, используя как преобразование, так и манипулируя всем позиционированием прокрутки страниц. Я попытался использовать Chatgpt, что не помогло. Я уверен, что решение - некоторая простая активация, но я очень неопытен с JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/794 ... roll-anima