jQuery에서 요소로 스크롤하는 4가지 방법

1. jQuery에서 요소로 스크롤하기 위한 전제 조건
2. jQuery 요소로 스크롤 - 문서 창에서 스크롤
3. jQuery Animate ScrollTop - animate 메서드를 사용한 부드러운 스크롤
4. 내부 링크에 대한 jQuery ScrollTop - 부드러운 스크롤 jQuery
5. 컨테이너 내부의 요소로 jQuery 스크롤
6. 명심해야 할 팁
7. jQuery ScrollTop용 두 가지 빠른 단축키

jQuery의 다양한 사용 사례에 대한 요소로 스크롤하는 쉬운 솔루션을 보여줍니다. scrollTop() 및 offset() 메소드를 사용하지만 position()을 사용하여 새로운 방법도 시연합니다.

jQuery를 사용하여 부드럽게 스크롤하는 방법을 볼 수 있습니다. 마지막으로 두 가지 일반적인 바로 가기와 오류를 방지하기 위한 몇 가지 팁을 시연합니다.

jQuery에서 요소로 스크롤하기 위한 전제 조건

1. scrollTop()
2. offset()
3. position()

먼저 jQuery에서 요소로 스크롤하는 데 사용할 메서드를 살펴보겠습니다.

scrollTop()

jQuery scrollTop() 메서드를 사용하면 요소의 scrollTop 속성을 가져오고 설정할 수 있습니다. scrollTop 속성의 값은 요소의 콘텐츠가 현재 세로로 스크롤되는 픽셀 수입니다.

scrollTop 속성에 대한 자세한 내용은 여기를 참조하세요.

.scrollTop() - 현재 scrollTop 값 가져오기

요소의 현재 scrollTop 값을 반환하기 위해 인수 없이 scrollTop()을 사용합니다.

console.log($('#container').scrollTop());

콘솔에서 요소의 scrollTop 보기 값을 봅니다. 이제 요소를 다른 위치로 스크롤하고 scrollTop 속성 값을 다시 기록해 보겠습니다.

여기에서 콘솔이 다른 값을 기록하는 것을 볼 수 있습니다. 이 get 형식의 jQuery scrollTop() 메서드는 스크롤 효과를 달성하는 데 중요합니다.

.scrollTop(val) - 새 scrollTop 값 설정

set 형식의 jQuery scrollTop() 메서드에서 (수직으로) 스크롤하려는 값을 전달할 수 있습니다.

$('document.documentElement').scrollTop(0);

이것은 0 값을 전달하기 때문에 주 문서를 맨 위로 스크롤합니다. 우리는 이것을 유용한 지름길로 다시 보게 될 것입니다.

jQuery 스크롤에서 요소 동작을 달성하기 위해 scrollTop()의 set 형식에 몇 가지 키 값을 전달할 것입니다.

여기에서 jQuery scrollTop() 함수에 대해 자세히 알 수 있습니다.

offset() - jQuery에서 부드러운 스크롤을 구현하는 데 도움이 되는 요소의 위치 찾기

jQuery offset() 메서드를 사용하면 문서 요소의 현재 위치를 결정할 수 있습니다. 이 메서드는 top 및 left라는 두 가지 속성을 반환합니다. 이것은 문서의 테두리 상자의 픽셀 수입니다(즉, 여백 없음).

console.log(`The position of the element w.r.t document is : ${
    $('#container').offset().top}`);

offset() 메소드는 문서를 기준으로 요소의 상단 위치를 표시합니다.

여기 jQuery offset() 메서드에 대해 자세히 알아보세요.

position() - jQuery에서 요소로 스크롤을 구현하는 또 다른 방법

position() 메소드는 약간의 차이점이 있는 offset() 메소드와 유사합니다. 가장 가까운 상위 요소에 상대적인 요소의 위치를 ​​반환합니다. 따라서 예를 들어 jQuery에서 scrolltop에 애니메이션을 적용하기 위해 요소의 상대적 위치를 조정할 때 position() 메서드가 유용합니다.

이 링크에서 jQuery position() 메서드에 대한 세부 정보를 얻을 수 있습니다.

‘position()‘은 여백을 포함하여 요소의 위치를 ​​반환합니다(여기서는 ‘offset()’ 메서드와 다릅니다).

// displays the position w.r.t. its closest parent

console.log(`This is the position of the element w.r.t. its closest parent:
${$('.filler:first').position().top}`);

// the offset() method displays position relative to the document

console.log(`This is the position of the element w.r.t. the document:
${$('.filler:first').offset().top}`);

기본 사항은 생략하고 jQuery의 다양한 사용 사례에 대한 요소로 스크롤해 보겠습니다.

jQuery 요소로 스크롤 - 문서 창에서 스크롤

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').offset().top);
});

1. #clickButton은 클릭하여 대상 요소로 스크롤하는 버튼입니다.
2. #scrollToMe는 스크롤하려는 요소입니다.

코드를 분해해 보겠습니다.

.on 메소드를 사용하여 버튼에 이벤트 핸들러를 연결합니다. 이 핸들러를 트리거하는 이벤트는 첫 번째 인수인 "click" 이벤트입니다.

사용자가 버튼을 클릭하면 코드는 .on 메서드에 대한 두 번째 인수에서 (익명) 콜백 함수를 실행합니다.

먼저 루트 요소인 document.documentElement 또는 이 경우 html 요소와 document.body 요소의 두 가지 선택기 인수 중 하나를 사용하여 스크롤할 전체 문서를 선택합니다.

그런 다음 set 형식의 이 요소에서 scrollTop() 메서드를 실행합니다(위 참조). 우리는 #scrollToMe ID가 있는 이미지 요소인 대상 요소로 scrolltop을 원합니다.

따라서 먼저 offset().top 메서드를 사용하여 페이지 상단에서 이 대상 이미지 요소까지의 픽셀 수를 찾습니다. 이 메서드는 문서에 상대적인 위치를 찾습니다.

그런 다음 이 값을 문서 루트/본문 요소에 첨부된 scrollTop() 메서드에 전달합니다. 따라서 위의 비디오 데모에서 볼 수 있듯이 전체 웹 페이지가 대상 이미지 요소로 이동합니다.

따라서 이 방법은 jQuery 스크롤을 요소 동작으로 쉽게 달성합니다.

그러나 솔직히 대상 요소로의 이 즉각적인 스크롤은 지루해 보입니다. 보기 좋은 부드러운 스크롤 jQuery 효과를 얻기 위해 더 많은 코드를 추가해 보겠습니다.

jQuery Animate ScrollTop - animate 메서드를 사용한 부드러운 스크롤

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).animate({scrollTop: $('#scrollToMe').offset().top}, 500)
});

코드는 이전 방법과 유사합니다. 선택한 루트/본문 요소에서만 animate() 메서드를 실행합니다.

첫 번째 인수는 애니메이션을 적용하려는 대상 CSS property:value 쌍이 있는 객체입니다.

여기에서는 scrollTop 속성만 변경하여 대상 이미지 요소에 도달하려고 합니다. 따라서 페이지 상단에서 이미지까지 픽셀 수 값을 할당합니다.

이전 방법과 마찬가지로 이미지 요소에서 .offset().top 메서드를 사용하여 이를 찾습니다.

내부 링크에 대한 jQuery ScrollTop - 부드러운 스크롤 jQuery

다음 코드를 사용하여 내부 링크에 대한 재사용 가능한 jQuery scrolltop 모듈을 만들 수도 있습니다.

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500);
})

여기에서 코드 논리를 자세히 살펴보겠습니다. (scrollToInternalLink.html, scrollToInternalLink.js, scrollToInternalLink.css 파일을 참조하세요.)

먼저 [href^="#"] jQuery 속성 선택기로 a 태그를 선택합니다. ^ 기호를 사용하므로 jQuery는 # 기호로 시작하는 href 속성이 있는 a 태그만 선택합니다.

프래그먼트 식별자를 사용하여 내부적으로 모든 요소에 연결합니다. 이는 내부 링크에 대한 참조이며 항상 # 기호를 앞에 둡니다.

따라서 위의 jQuery 선택기는 페이지의 내부 링크를 선택합니다.

HTML의 내부 링크에 대한 자세한 내용은 여기를 참조하세요.

그런 다음 e.preventDefault() 메서드를 호출하여 페이지를 다시 로드하는 a 태그의 기본 동작을 비활성화합니다.

이제 대상 요소의 해시를 추출합니다. 이는 대상 요소의 “프래그먼트 식별자"에 대한 참조입니다. 대부분의 최신 HTML 코드는 대상 요소의 id 속성을 사용합니다.

이 해시를 사용하여 대상 요소를 선택합니다.

나머지 코드는 위의 jQuery animate to scroll to 코드와 동일합니다. animate() 메소드를 전달하고 scrollTop 속성을 대상 요소의 offset().top 값으로 설정합니다.

컨테이너 내부의 요소로 jQuery 스크롤

때로는 대상 요소가 스크롤 가능한 컨테이너 내부에 있습니다. 이와 같이 배치된 요소에 다음 코드를 jQuery에 사용할 수 있습니다.

let container = $('#container');
let scrollToMe = $('#scrollToMe');

$('button').on('click', function() {
  container.animate(
      {
        scrollTop: scrollToMe.offset().top - container.offset().top +
            container.scrollTop()
      },
      500)
});

여기서 #container는 컨테이너 역할을 하는 외부 div 요소입니다.

#scrollToMe는 스크롤하려는 대상 이미지입니다. 외부 div 컨테이너 내부에 중첩됩니다.

또한 외부 div 컨테이너에는 다른 중첩된 div 및 p 요소가 있습니다. 이 외부 div 컨테이너는 스크롤 가능하며 수직 스크롤 막대가 있습니다.

트리거 버튼에 click 이벤트 핸들러를 추가합니다. 콜백은 컨테이너 요소에서 animate 메서드를 실행합니다.

컨테이너의 scrollTop 속성을 새 값으로 설정합니다. 다음 공식으로 이 새 값을 계산합니다.

scrollToMe.offset().top - container.offset().top + container.scrollTop()

1. scrollToMe.offset().top은 문서 상단에서 대상 이미지 요소까지의 픽셀 수입니다.
2. container.offset().top은 페이지 상단에서 컨테이너 div 요소 상단까지의 픽셀 수입니다.

그러나 약간의 함정이 있습니다. 컨테이너 div 요소는 스크롤 가능합니다. 처음에 스크롤한 경우 해당 픽셀만큼 아래로 이동했습니다.

따라서 container.scrollTop() 요소를 scrollTop 메소드에 전달하는 매개변수에 추가해야 합니다.

명심해야 할 팁

위의 메서드에서 jQuery를 사용하여 요소로 스크롤하기 위한 두 가지 중요한 팁이 있습니다.

프로 팁 1:

offset 및 position 메소드는 float 값을 반환하며 페이지가 많이 확대될 것으로 예상되면 오류가 발생할 수 있습니다. 따라서 parseInt 함수를 사용하여 먼저 반환된 값을 int 값으로 변환할 수 있습니다.

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').parseInt(offset().top));
});

프로 팁 2:

animation()도 여유 함수를 인수로 사용합니다. 이 함수는 애니메이션이 실행되는 방식을 결정합니다.

이 기능의 기본값은 부드럽고 균일한 애니메이션 효과를 제공하는 스윙입니다. 따라서 이 기본값을 사용하여 부드럽게 스크롤되는 jQuery 자체를 얻을 수 있습니다.

jQuery ScrollTop용 두 가지 빠른 단축키

마지막으로 jQuery 스크롤을 요소로 사용하는 두 가지 일반적인 사용 사례에 대한 두 가지 빠른 단축키가 있습니다.

문서 바로 가기의 맨 위로 jQuery 스크롤

콘텐츠가 많은 긴 웹 페이지가 있는 경우 쉽게 탐색할 수 있도록 맨 아래에 "맨 위로 스크롤" 링크를 제공할 수 있습니다.

이러한 앵커 링크의 바로 가기 코드는 다음과 같습니다.

// this code scrolls to the top of the document with a click on the anchor
// element

$('#top').on('click', function() {
  $(document.documentElement, document.body).animate({scrollTop: 0}, 500);
});

animate 함수의 대상 scrollTop 값을 0으로 설정했습니다. 그러면 페이지 상단으로 스크롤됩니다.

jQuery Scroll to Element의 URL에 해시/프래그먼트 식별자 추가

대상 요소의 조각 식별자를 주소 표시줄의 URL에 추가하려면 위의 앵커 링크 코드에 대한 스크롤에 한 줄만 추가하면 됩니다.

// this code adds the fragment identifier/hash of the target
// element to the URL

// this is a reusable module to jQuery scrollTop from any internal link

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500, function() {
    window.location.hash = targetHash;
  });
})

window.location.hash = targetHash 행은 이 기능을 제공하는 코드입니다.

URL 끝에 요소 해시/프래그먼트 식별자 scrollToMe가 추가되는 것을 볼 수 있습니다.

JavaScript 모범 사례와 동기화하여 애니메이션 후에 실행되도록 이 코드 조각을 animate 함수에 대한 콜백으로 포함하도록 주의하십시오.