I would like to ask why my page goes up when I clicked it again? I mean if I click on the 'projects' for example then it goes to the projects section which is (0, 590), but If I click it on again or click on skills then it goes up to the top of the page.
const home_view = document.querySelector('.home');
const project_view = document.querySelector('.project');
const skill_view = document.querySelector('.skill');
const about_view = document.querySelector('.about');
const hire_view = document.querySelector('.hire');
home_view.addEventListener('click', () => {
window.scrollTo(0, 0);
});
project_view.addEventListener('click', () => {
window.scrollTo(0, 590);
});
skill_view.addEventListener('click', () => {
window.scrollTo(0, 1250);
});
about_view.addEventListener('click', () => {
window.scrollTo(0, 1750);
});
hire_view.addEventListener('click', () => {
window.scrollTo(0, 2350);
});
Generally, if you want to scroll to specific element, it would be better to use scrollIntoView function
Ex:
const projectElement = document.querySelector('project-element-selector')
project_view.addEventListener('click', () => {
projectElement.scrollIntoView({ behavior: "smooth" });
});
Because using scrollTo for this purpose may not achieve the same result in different screens width.
I didn't add every css part, because I guess it's not necessary in this case. I don'k know that this added HTML will give you more help, but I hope so
const home_view = document.querySelector('.home');
const project_view = document.querySelector('.project');
const skill_view = document.querySelector('.skill');
const about_view = document.querySelector('.about');
const hire_view = document.querySelector('.hire');
home_view.addEventListener('click', () => {
window.scrollTo(0, 0);
});
project_view.addEventListener('click', () => {
window.scrollTo(0, 590);
});
skill_view.addEventListener('click', () => {
window.scrollTo(0, 1250);
});
about_view.addEventListener('click', () => {
window.scrollTo(0, 1750);
});
hire_view.addEventListener('click', () => {
window.scrollTo(0, 2350);
});*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
border: none;
outline: none;
}
.nav_container {
height: 200vh;
top: 0;
left: 0;
margin: 0 auto;
background-color: rgba(13, 12, 14, 0.8);
border-bottom: var(--nav-line) solid var(--nav-borderline-clr);
}
.main_nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
}
.main_nav a {
color: var(--nav-text-clr);
font-weight: 400;
transition: .3s;
}
.main_nav a:hover {
color: var(--white-clr);
}
.nav_list {
display: flex;
gap: 2.5rem;
text-transform: uppercase;
}
.nav_list-item {
position: relative;
}
.nav_list-item:after{
content: '';
position: absolute;
left: 0;
bottom: -33px;
width: 0;
height: var(--nav-line);
background-color: var(--btn-border-clr);
transition: .3s;
border-radius: 2px;
box-shadow: rgba(219, 94, 44, .6) 0px 0px 10px;
}
.nav_list-item:hover:after {
width: 100%;
}<header class="nav_container">
<nav class="main_nav">
<ul class="nav_list">
<li class="nav_list-item active home"><a href="#">Home</a></li>
<li class="nav_list-item project"><a href="#">Projects</a></li>
<li class="nav_list-item skill"><a href="#">Skills</a></li>
<li class="nav_list-item about"><a href="#">About Me</a></li>
</ul>
<button class="btn hire" aria-label="button">Hire Me</button></a>
</nav>
</header>