I'm trying to create a website that will work simply. There is header page on 100vh with "more" button. By clicking the "more" button, the page goes down where is horizontal scroll with three pages - main page with three button - contact, products and back. By clicking on those buttons, the page will go up(back), right or left. But the main pages must be in the middle.
Example:
contcat page - main page - products page
But when I click on the "more "button in the header, the page goes down to the products page and then on the left to the main page.
But I need the page to go right down to the middle.
My snippet:
const button = document.getElementById('more');
const navigation = document.getElementById('nav');
button.onclick = () => {
navigation.scrollIntoView();
};
function admin(){
window.location = "admin/password_page.html";
}
function products(){
window.location = "products/index.html"
}*{
padding: 0;
margin: 0;
scroll-behavior: smooth;
overflow-y: hidden;
}
header{
height: 100vh;
}
main{
height: 100vh;
width: 100vw;
}
main .container{
width: 100%;
height: 100%;
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
flex-direction: row-reverse;
}
article{
flex: none;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/main.css">
<title>Project</title>
</head>
<body>
<header id="header">
<h2>Company Name</h2>
<h4 onclick="admin()" class="admin"><i class="fas fa-user-cog"></i> ADMIN</h4>
<button id="more">More</button>
</header>
<main id="main-content">
<div class="container" id="container">
<article id="footer">
<h2>this is contact page</h2>
</article>
<article id="nav">
<button><a href="#products">Products</a></button>
<button><a href="#footer">Contact</a></button=>
<button><a href="#header">Back</a></button>
</article>
<article id="products">
<h1>this is product page</h1>
</article>
</div>
</main>
</body>
</html>I know that if I have scrollIntoView() to the nav, the footer is loaded first and then it goes to the main page, but can I go but I can go straight to the main page?
I already sent the problem once but I didn't find an answer. Now I tried to explain it better.