scrollIntoView 함수
초간단함
scrollIntoView 함수를 쓰면 됨.
내가 구현하려는건 버튼을 누르면
special가 있는 위치로 슝 내려가는 것!
const special=document.querySelector(".special");
btn.addEventListener('click',event=>{
special.scrollIntoView({behavior: "smooth", block: "center"})
})원하는요소를 DOM으로 가져오고 함수를 적용해주면 끝!
옵션으로 behavior, block을 설정할 수 있다.
behavior: "smooth": 부드럽게 스크롤하기block: "center":요소가 중앙에 위치하게 스크롤하기- start, end로도 설정할 수 있다.
- 자세한건 >공식사이트< 확인!
scroll함수는 알았는데, 이거로 구현하려니까 아주 구질구질한 코드가..ㅠ
special 엘리먼트의 y좌표를 rabbit.offsetTop으로 알아오고...
중앙정렬하려고 window.innerHeight/2만큼 빼고
special 이미지 사이즈의 절반만큼 더하고 난리남
구글링할 때 정신차리고 ㅎㅏ기....!
javascript scroll to element 라고만 쳐도 바로 mdn사이트 나온다고..!
🏃🏻♀️💨