0

Bear with me because I'm pretty new to wordpress & elementor :D, so currently I'm developing a one page website, but I'd like to put one section / screen cover before user can access the website, then click on 'Open Web' button to scroll down or open the web, and hide the cover page.

I'm using Elementor and still developing via website.

Currently this is my code.

CSS:

body{
    overflow: hidden;
}

#coverpage{
    transition: height 2s;
}

#coverpage.shrink {
    height: 0;
} 

Button html:

<input type="button" value="Open Web" onclick="openWeb()">

JS:

function openWeb() {    
    document.getElementById("coverpage").classList.toggle("shrink");
    document.body.style.overflow = "scroll";
}

This works just fine, except when the user has already scrolled down to see other sections, then refreshes the page, it doesn't load back from the cover page. Rather than the current view they're on, and this caused a problem because I set the body to overflow hidden thus user cannot scroll after they reload the page and is stuck on the view.

I tried to use display: hidden, then display: block when button's clicked, but then the motion effects - entrance animation didn't work..

any workarounds or suggestion? thank you very much in advance! :D

1 Answer 1

0

You could check the window Y positon, if its greater than 0, move the user back to the top of the page

window.onload = () => {
    setTimeout(() => {
        if (window.pageYOffset > 0) window.scrollTo(0, 0);
    }, 1);
};
1
  • thank you! I used this approach and tweaked it a little with beforeunload & it works! Aug 15, 2021 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.