안녕하세요 이번 글은 자바스크립트에서 버튼을 누르면
해당 위치로 스크롤이 이동하는 방법에 대해서알아보겠습니다.
한 번이라도 보셨는지는 모르겠으나,어떤 회사 사이트라던지 아니면 인터넷에 무수히 많은사이트 중, 버튼을 누르면 해당 위치로 스크롤을 이동하는 사이트를보셨을지 모르겠습니다.
저는 일단 그 방법을 scrollIntoView를 통해 구현해봤습니다.먼저 버튼 부분을 상수로 만들어준 다음.
이동하고 싶은 콘텐츠 부분을 만들어줍니다.저는 임의로 인라인 스타일로 만들어 주겠습니다.
<div class="div div1" style="background-color: red;"></div>
<div class="div div2" style="background-color: blue;"></div>
<div class="div div3" style="background-color: green;"></div>
간단하게 div로 만들어준 다음 크기는 저는 css부분에서 공통적으로
주기 위해 div라는 클래스를 공통으로 주었습니다.
이후 크기는 width:100% height:100%으로 주었습니다.
이후 a 태그 또는 button 태그를 통해 각 이동할 버튼을 만들어줍니다.
이후 버튼을 const를 통해 먼저 변수로 만들어줍니다.
예를 들어
const DIVRED = document.querySelector("div-btn");
이런 것처럼요.
이후 해당 버튼에 이벤트를 만들어줍니다.
DIVRED.addEventListener("click",(e)=>{
let div1 = document.querySelector(".div1");
div1.scrollIntoView({behavior:'smooth'});
e.preventDefault();
});
let div1 같은 경우 red div부분입니다.
3개의 div 중 첫 번째 div입니다.
버튼을 누르게 되면 div1 콘텐츠 부분으로 스크롤이 이동하게 되는데
smooth 속성을 통해 부드럽게 이동하게 됩니다.
e.preventDefault()는 이벤트를 중지시켜주는 것인데,
이 코드를 추가시키지 않는다면
테스트를 위해 여러 번 클릭을 하게 되는 경우에는
원하시는 동작이 나오지 않을 수도있습니다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
JavaScript 타이머 구현 setInterval (0) | 2023.02.08 |
---|---|
React Error: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 오류 해결법 (0) | 2022.03.13 |
JavaScript 함수선언 방식 (익명함수) / addEventListener 이벤트 (0) | 2021.09.14 |
JavaScript var let const 차이점 (0) | 2021.09.14 |
visual Studio Code 한글 설정 / 비주얼 스튜디오 한글 설정 및 유용한 확장 플러그인(htmltagwrap) (0) | 2021.08.24 |