스크롤 위치 이동시키는 방법 (스크롤 맨 위 이동, 스크롤 맨 아래 이동)

웹 페이지에서 사용자가 현재 보고 있는 위치를 빠르게 이동시키는 방법은 사용자 입장에서 매우 유용한 기능입니다.

이 글에서는 간단하게 스크롤 위치를 조정하는 방법을 소개합니다.

스크롤 맨 위로 이동

스크롤 맨 위로 이동 시키는 방법은 간단하게 href = "#" 를 이용하면 페이지의 최상단으로 이동할 수 있습니다.

아래는 이를 구현한 예제입니다

이 코드는 클릭 시 페이지를 최상단으로 이동시킵니다.

좀 더 부드러운 스크롤 효과를 원한다면 JavaScript를 활용할 수 있습니다.

페이지의 맨 아래로 스크롤을 이동시키는 방법도 JavaScript를 이용하면 쉽게 구현할 수 있습니다.

아래는 부드러운 스크롤 효과를 포함한 예제입니다:

코드는 링크를 클릭했을 때 handleBottomMove 함수를 호출하여 페이지를 맨 아래로 부드럽게 이동시킵니다.

window.scrollTo 메서드의 behavior: 'smooth' 옵션은 스크롤 이동을 부드럽게 만들어줍니다.

목차 등을 클릭했을 때 특정 위치로 스크롤을 이동시키는 것도 자주 사용되는 기능입니다.

이 경우에도 href 속성과 id를 활용할 수 있습니다.

위 코드는 목차 항목을 클릭했을 때 id가 section1인 요소로 이동하게 합니다.

위의 예제들을 활용하여 여러분의 웹 사이트에 이러한 기능을 추가해 보세요.

질문이나 궁금한 점이 있다면 댓글로 남겨주세요.

읽어주셔서 감사합니다. 😊