How to Create a Scroll-Based Intro Page

How to load intro Page before accessing website?

We would like user to scroll the intro.html before accessing the index.html.

Imagine you are index.html, you would like to load intro.html before you load the index.html, how would you do it?

The concepts involved are:

1. Intro / Splash Page — intro.html acts as an entry experience before the main website.
2. Scroll Detection — JavaScript detects when the visitor reaches the bottom of the intro.
3. Viewport & Document Height Calculation — using scrollHeight, innerHeight, and scrollY.
4. Session State Management — sessionStorage remembers that the intro was completed for the current browser tab/session.
5. Conditional Redirect — index.html redirects visitors to the intro when the session flag doesn’t exist.
6. Client-Side Navigation / Routing — JavaScript controls which page the visitor sees.

Here are the codes

In the index.html make sure you have this javascript

<script>
// Check if the user has already navigated
if (sessionStorage.getItem(‘navigated_session’) !== ‘true’) {
window.location.href = “/intro.html”;
}
</script>

in the intro.html, make sure you have this javascript
<script>
let hasNavigated = false;
let scrollheight = document.documentElement.scrollHeight;
let windowinnerheight = window.innerHeight;
let scrollmaxheight = scrollheight – windowinnerheight;

window.addEventListener(‘scroll’,()=>{
if(window.scrollY >= scrollmaxheight && hasNavigated == false){
console.log(‘Navigated’);
hasNavigated = true;
sessionStorage.setItem(‘navigated_session’, ‘true’);
window.location.href = “/index.html”;
return;
}
else{
console.log(‘Not Yet navigated’);
hasNavigated = false;
}
});
</script>