how to activate free scrolling back to top of page after javascript scroll animation (WEB DEVELOPMENT)

I have a series of animations which ends with text and image being animated upwards(think of starwars narrative). when the animation is complete however, I am able to keep scrolling down the page to other content but i cannot scroll back up to reread the text which will be necessary. can anyone help provide a solution? here is my script.

//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);
});

I have tried changing the css positioning as well as animation using both transform and manipulating the whole page scroll positioning without success. I tried using CHATGPT which was no help. I’m sure the solution is some simple activation but I am very inexperienced with javascript.