자바스크립트 scorll

이미지를 클릭시 해당 위치로 이동

이미지에 스타일 적용

.gif-img {position: relative; margin-bottom:32px;}
.gif-click{position: absolute; width: 100%; height: 20%; bottom: 0;}

js
1번

const gifImg = document.querySelector(".gif-click");
const gifDocument = document.querySelector(".gif-img-content");
const gifDoc = gifDocument.offsetTop - 48;

gifImg.onclick = function(){
window.scroll({top:gifDoc, behavior:'smooth});
}

offsetTop
- 상위 요소의 상단에서부터 해당 요소의 상단까지의 거리를 반환


2번

const gifImg = document.querySelector(".gif-click");
 

gifImg.onclick = function(){
const location = document.querySelector(".new-scorll").offsetHeight - 48;
window.scrollTo({top:location, behavior:'smooth});
}

scrollTo
- 지정된 위치로 스크롤


둘다 화면에 보여지는건 같음


참고
[코드펜](https://codepen.io/heerachoi/pen/RwyQaBp)
[참고 문서](https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo)