[javascript] 스크롤 원하는 위치로 부드럽게 이동 offsetTop scrollTo() behavior사용방법, scrollTop 이동

검찰의 금고를 열다

 

프론트 개발을 하다 보면 위와 같이 스크롤 이동을 해야 할 일이 있다.

첨부한 페이지 말고도 종종 사용을 하는데

"어떻게 했더라?" 하면서 예전 소스를 열어보는 나를 위해

그냥 정리좀 해둔다 ㅋㅋ

gif 실제 페이지 링크

 

방법은 여러가지인데, 순수 javascript를 이용한 방법만 남겨둔다.

 

 

스크롤(scroll) 맨 위로 이동 시키기

window.scrollTo(0,0);
//scrollTo(x좌표, y좌표)

맨 위로 버튼을 누르면 띡 이동을 시켜버리는 방법

 

 

스크롤 부드럽게 이동하는 방법

window.scrollTo({
	top: 0,
	left: 0,
	behavior: "smooth" //스크롤 효과 속성
});

behavior 옵션

 - auto: 띡 이동

 - smooth : 부드럽게 이동

 

출처 - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

 

 

 

원하는 페이지 위치로 이동하는 방법 

const offsetTop = Document.querySelector("이동을 원하는 녀석").offsetTop;
//offsetTop(y 좌표) 구해서 넣어주면 부드럽게 페이지가 이동한다. 

window.scrollTo({
    top: offsetTop,
    left: 0,
    behavior: "smooth"
});

offsetTop 을 이용해서 y 값을 구해와서 사용하면 된다.

 

 

 

 

See the Pen updown by KIHWAN CHUN (@yahao2512) on CodePen.

 

샘플을 만들어봤다. 참고해서 사용하시길.

 

 

gsap을 이용하면 더 쫀득하게 움직임을 줄 수 있고

실무에서도 가끔 사용을 하기는 했지만,

바쁜 세상이니 간단하게 사용하는 방법을 더 추천하고 싶다.

 

 

 

출처 - https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo