[jQuery 기초] scroll 이벤트 / scrollTop() / offset().top

jQuery 스크롤 이벤트 📜

웹페이지에서 스크롤이 움직일 때 특정 동작을 실행하고 싶을 때
jQuery의 scroll 이벤트를 사용합니다.

또한

scrollTop()
offset().top

메서드를 활용하면 스크롤 위치를 확인하거나 특정 위치로 이동할 수 있습니다.

주요 포인트 Top3

01. scroll 이벤트 📜

scroll 이벤트는 스크롤이 움직일 때 실행되는 이벤트입니다.

예) 💡

$(window).scroll(function(){
    console.log("스크롤 발생")
})

설명

스크롤이 움직일 때마다 코드 실행

02. scrollTop() 메서드 📏

scrollTop()은 현재 스크롤 위치 값을 반환하는 메서드입니다.

예) 💡

$(window).scroll(function(){
    console.log($(window).scrollTop())
})

설명

현재 스크롤 위치(px) 출력

예를 들어

scrollTop = 0
→ 페이지 최상단

scrollTop = 500
→ 500px 내려간 상태

특정 위치에서 이벤트 실행

$(window).scroll(function(){
 
    if($(window).scrollTop() > 500){
        $(".topBtn").fadeIn()
    }
 
})

설명

스크롤이 500px 이상 내려가면 버튼 표시

03. offset().top 메서드 📍

offset().top은 특정 요소의 화면 위치를 반환하는 메서드입니다.

예) 💡

$(".section").offset().top

설명

section 요소의 위치(px)

메뉴 클릭 시 해당 위치로 이동

$(".menu").click(function(){
 
    $("html, body").animate({
        scrollTop : $(".section").offset().top
    }, 500)
 
})

설명

메뉴 클릭 시 section 위치로 스크롤 이동

GOYO.’s Tip 💡

scrollTop()과 offset().top은 함께 사용하는 경우가 많습니다.

대표적인 활용 예

탑 버튼 만들기
메뉴 클릭 시 해당 섹션 이동
스크롤 애니메이션
스크롤 위치 감지

또한 스크롤 이동을 할 때는

$("html, body").animate()

구조를 함께 사용하는 경우가 많습니다.

마무리

이번 글에서는 jQuery에서 스크롤과 관련된 기능인

scroll 이벤트
scrollTop()
offset().top

메서드를 정리했습니다.

이 기능을 활용하면
웹페이지에서 스크롤 기반 인터랙션을 쉽게 구현할 수 있습니다.