[Dseok의 코딩스터디] javascript & jquery .scrollTop() 한방에 끝내기 | 스크롤 위치 조절 & 이벤트 활용법

📌 .scrollTop()이란?

jQuery.scrollTop() 메서드는 웹 페이지에서 스크롤 위치를 가져오거나 설정할 때 사용하는 메서드입니다. 페이지의 특정 위치로 이동하거나 현재 스크롤 위치를 확인하는 데 유용합니다.

✅ 기본 문법

$(selector).scrollTop();  // 현재 스크롤 위치 가져오기
$(selector).scrollTop(value);  // 스크롤 위치 설정

• $(selector).scrollTop();: 현재 요소의 스크롤 위치를 가져옵니다.
• $(selector).scrollTop(value);: 지정한 위치로 스크롤을 이동합니다.

📌 .scrollTop() 활용 예제 7가지

1️⃣ 현재 스크롤 위치 확인하기

$(window).on("scroll", function() {
  console.log($(window).scrollTop());
});

✅ 설명: 현재 사용자의 스크롤 위치를 콘솔에 출력합니다.

 

2️⃣ 버튼 클릭 시 최상단으로 이동

$("#toTop").on("click", function() {
  $("html, body").scrollTop(0);
});

✅ 설명: 버튼 클릭 시 페이지의 최상단으로 이동합니다.

 

3️⃣ 부드러운 스크롤 효과 추가

$("#toTop").on("click", function() {
  $("html, body").animate({ scrollTop: 0 }, 500);
});

✅ 설명: animate()를 사용해 자연스럽게 스크롤됩니다.

 

4️⃣ 특정 섹션으로 스크롤 이동

$("#moveToSection").on("click", function() {
  $("html, body").animate({ scrollTop: $("#targetSection").offset().top }, 500);
});

✅ 설명: 특정 요소(#targetSection)로 부드럽게 스크롤 이동합니다.

 

5️⃣ 스크롤 위치에 따라 버튼 표시/숨기기

$(window).on("scroll", function() {
  if ($(window).scrollTop() > 200) {
    $("#toTop").fadeIn();
  } else {
    $("#toTop").fadeOut();
  }
});

✅ 설명: 스크롤이 일정 위치(200px 이상)로 내려가면 버튼이 나타나고, 올라가면 사라집니다.

 

6️⃣ 스크롤 위치에 따라 네비게이션 스타일 변경

$(window).on("scroll", function() {
  if ($(window).scrollTop() > 100) {
    $("#navbar").addClass("fixed-nav");
  } else {
    $("#navbar").removeClass("fixed-nav");
  }
});

✅ 설명: 스크롤이 100px 이상 내려가면 네비게이션에 fixed-nav 클래스를 추가하여 고정 스타일을 적용합니다.

 

7️⃣ 특정 위치에 도달하면 애니메이션 효과 적용

$(window).on("scroll", function() {
  if ($(window).scrollTop() > $("#targetSection").offset().top - 300) {
    $("#targetSection").addClass("animate");
  }
});

✅ 설명: 특정 섹션에 도달하면 애니메이션을 적용하는 클래스를 추가합니다.

 

📌 마무리 🎯

• .scrollTop()은 현재 스크롤 위치 확인 & 조정하는 데 사용됩니다.
• 부드러운 스크롤, 네비게이션 고정, 버튼 표시/숨김 등의 기능에 활용 가능합니다.
• animate()를 활용하면 부드러운 스크롤 효과를 만들 수 있습니다.

🚀 이제 .scrollTop()을 활용해서 직접 웹 페이지에 적용해 보세요!