如何将页面滚动到特定位置

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>