Me gustaría preguntar por qué mi página sube cuando hice clic nuevamente. Quiero decir, si hago clic en 'proyectos', por ejemplo, va a la sección de proyectos que es (0, 590), pero si hago clic de nuevo o hago clic en habilidades, entonces sube a la parte superior de la página.
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); });En general, si desea desplazarse a un elemento específico, sería mejor usar la función scrollIntoView
Ex:
const projectElement = document.querySelector('project-element-selector') project_view.addEventListener('click', () => { projectElement.scrollIntoView({ behavior: "smooth" }); }); Porque usar scrollTo para este propósito puede no lograr el mismo resultado en diferentes anchos de pantalla.
No agregué cada parte de css, porque supongo que no es necesario en este caso. No sé si este HTML añadido te dará más ayuda, pero espero que sí.
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>