[jQuery] .scrollTop()

See the Pen [jQuery] .scrollTop() by mill (@millfeel) on CodePen.

 

화면을 스크롤할 때 현재 사용자가 스크롤한 만큼의 거리를 계산해주거나, 스크롤 위치를 이동한다.

// 간격 값 반환
$('선택자').scrollTop();

// 스크롤 위치 이동
$(window).scrollTop(숫자);

[JS와 비교하기]

// JS
const $value = document.querySelector('.value');
const $topBtn = document.querySelector('.topBtn');

window.addEventListener('scroll', function () {
  const scrollValue = window.scrollY;
  
  if (scrollValue >= 500) {
      $topBtn.style.display = 'block';
    } else {
      $topBtn.style.display = 'none';
    }
  
  $value.textContent = scrollValue;
})

$topBtn.addEventListener('click', function (){
  window.scrollTo(0, 100);
})

// jQuery
$(function(){
  $(window).scroll(function () {
    const scrollValue = $(window).scrollTop();
    
    if (scrollValue >= 500) {
      $('.topBtn').css('display', 'block');
    } else {
      $('.topBtn').css('display', 'none');
    }
    
    $('.value').text(scrollValue);
  })
  
  $('.topBtn').click(function () {
    $(window).scrollTop(100);
  });
});

---

[공부좌표]

인터랙티브 웹디자인 p156