윈도우 스크롤은 웹 브라우저 창 전체를 위아래(세로)나 좌우(가로)로 움직이는 것을 말합니다. 웹 페이지가 한 번에 다 보이지 않을 때, 사용자가 페이지의 다른 부분을 볼 수 있게 하는 기능입니다.
const JS_스크롤기능 = () => {
// 1-1) <HTML /> **스크롤 맨 위**로 올려줘
window.scrollTo({ top: 0 });
// 1-2) <HTML /> **스크롤 맨 위**로 부드럽게 올려줘
window.scrollTo({ top: 0, behavior: "smooth" });
// 1-3) <HTML /> 스크롤 **지금 위치에서 500만큼** 위로 올려줘
window.scrollBy({ top: -500 })
}
window.scrollTo와 window.scrollBy는 전체 웹 페이지를 스크롤하는데 사용됩니다.
scrollTo : 지정된 위치로 이동scrollBy : 현재 위치를 기준으로 이동behavior: "smooth" 옵션을 사용하면 부드럽게 스크롤하는 효과를 줄 수 있습니다.엘리먼트 스크롤은 웹 페이지 안에 있는 특정 요소(엘리먼트) 자체를 스크롤하는 것을 말합니다. 이때 그 요소는 overflow 속성을 사용해서 스크롤이 가능하도록 설정해줘야 해요.
const JS_스크롤기능 = () => {
document.getElementById("HTML_나의디브").scrollTo({ top: 0 })
}
scrollTo : 요소의 스크롤바를 지정된 위치로 이동