나의 디딤돌

안녕하세요 이번 글은 자바스크립트에서 버튼을 누르면

해당 위치로 스크롤이 이동하는 방법에 대해서알아보겠습니다.

한 번이라도 보셨는지는 모르겠으나,어떤 회사 사이트라던지 아니면 인터넷에 무수히 많은사이트 중, 버튼을 누르면 해당 위치로 스크롤을 이동하는 사이트를보셨을지 모르겠습니다.

저는 일단 그 방법을 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()는 이벤트를 중지시켜주는 것인데,

이 코드를 추가시키지 않는다면

테스트를 위해 여러 번 클릭을 하게 되는 경우에는

원하시는 동작이 나오지 않을 수도있습니다.