how can I scroll page to the specific position

Question

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

Answer 1

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.

Answer 2

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>