버튼 클릭시 원하는 위치요소로 위치 이동하기
위의 기능을 이용 시 Window.scrollTo()를 이용
1. 메소드 문법 익히기
window.scrollTo(x좌표, y좌표)- 말 그대로 첫 번째 인자는 x좌표의 위치, 두 번째 인자는 y 좌표의 위치(본인이 가고 싶은 위치)
window.scrollTo({top:0, left:0, behavior:'auto'});- 위의 코드 설명 참조 사이트
- 든 값이 필수가 아니며 순서도 상관이 없다.
- 위 옵션들로 css의 top, left, scroll-behavior 속성을 사용하여 화면을 이동
- behavior의 값에는 auto, instant, smooth가 존재(문자이므로 따옴표 필수!
- smooth는 부드럽게 이동하는 애니메이션 효과
2. 좌표 값 받아와서 사용하기
- 자바스크립트의 querySelector와 offsetTop이나 offsetLeft로 직접 해당 태그의 위치를 가져온다.
- document.querySelector로 먼저 위치를 알아오려는 요소를 가져온다.
- offsetTop으로 해당 요소의 top 위치(마진 값까지 포함한다고 한다)를 가져온다.
- offsetLeft는 이름으로 유추할 수 있듯이 left 위치를 가져온다. 역시 마진 값도 포함한다.
const location = document.querySelector("#move").offsetTop;
window.scrollTo({top:location, behavior:'smooth'}); // 적용- https://enai.tistory.com/33
참고 사이트
Front End. Dev