JavaScript에서 페이지 맨 위로 스크롤

1. JavaScript에서 Vanilla JS window.scrollTo() 메소드를 사용하여 페이지 상단으로 스크롤
2. Animated Vanilla JS를 사용하여 페이지 상단으로 스크롤 - window.scrollTo() 메서드의 새로운 형식
3. jQuery scrollTop() 메서드를 사용하여 페이지 맨 위로 스크롤
4. jQuery animate() 메서드로 애니메이션을 적용하여 페이지 맨 위로 스크롤

사용자가 JavaScript 페이지의 맨 위로 스크롤할 수 있도록 긴 웹 페이지에 대한 UI 요소를 갖는 것이 중요합니다. 이 튜토리얼에서는 맨 위로 스크롤하는 여러 JavaScript 메소드를 찾을 수 있습니다.

바닐라 자바스크립트 scrollTo 메소드를 사용할 것입니다. 또한 jQuery scrollTop() 메서드와 scrollTop 속성을 사용하여 맨 위로 스크롤하는 방법도 보여줍니다(jQuery 사용의 이점을 알아보려면 미리 읽어보세요).

우리는 또한 보너스 트릭을 제공할 것입니다: 영리한 한 줄 순수 HTML 바로 가기 및 페이지 상단으로 스크롤하는 사용자 정의 바닐라 JS 애니메이션.

JavaScript에서 Vanilla JS window.scrollTo() 메소드를 사용하여 페이지 상단으로 스크롤

바닐라 JS window.scrollTo() 메소드를 사용하여 JavaScript에서 페이지 맨 위로 스크롤할 수 있습니다. window.scrollTo() 메소드를 사용하여 문서에서 지정된 x 및 y 좌표 세트로 스크롤할 수 있습니다.

이 방법의 이전 형식은 다음과 같이 작동합니다.

window.scrollTo(x - coordinate, y - coordinate);

좌표에 대한 인수로 (0,0)을 전달하여 JavaScript에서 페이지 상단으로 스크롤하는 데 사용할 수 있습니다.

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  window.scrollTo(0, 0);
});

(첨부된 HTML, CSS 파일을 참고하시면 쉽게 코드를 따라하실 수 있습니다.)

아래에서 이 코드의 데모를 볼 수 있습니다.

Animated Vanilla JS를 사용하여 페이지 상단으로 스크롤 - window.scrollTo() 메서드의 새로운 형식

위의 솔루션은 작업을 완료하지만 좋은 UX를 만들지는 않습니다.

window.scrollTo() 메서드에는 스크롤 동작을 애니메이션화할 수 있는 새로운 형식도 있습니다. 이 멋진 애니메이션 효과로 UX 및 사용자 참여 지표를 개선할 수 있습니다.

새 양식은 다음과 같이 작동합니다.

window.scrollTo(options)

    // options is a JSON objectwith
    // top: the y-coordinate to scroll to
    // left : the x-coordinate to scroll to
    // behavior : an animated effect with vrious string values like 'smooth',
    // 'slow' etc.

이 방법의 이 형식을 사용하여 바닐라 JavaScript로 페이지 상단으로 스크롤하는 애니메이션을 만들 수 있습니다.

let scrollTopBtn = document.getElementById('top');

scrollTopBtn.addEventListener('click', function() {
  window.scrollTo({top: 0, behavior: 'smooth'});
});

(첨부된 HTML, CSS 파일을 참조하시면 이해가 빠릅니다.)

코드는 간단합니다. 스크롤 상단 기능을 트리거하기 위해 이벤트 리스너를 버튼에 연결했습니다.

콜백은 window.scrollTo() 메서드를 새 형식으로 구현했습니다. 상단으로 스크롤하기 위해 top:0을 전달했고 애니메이션 효과를 균일하게 만들기 위해 behavior: 'smooth'를 전달했습니다.

여기에서 작업 데모를 볼 수 있습니다.

바닐라 JS window.scrollTo() 메소드에 대한 자세한 내용은 여기를 참조하십시오.

jQuery scrollTop() 메서드를 사용하여 페이지 맨 위로 스크롤

jQuery scrollTop() 메소드를 사용하여 페이지 상단으로 스크롤할 수도 있습니다.

$("#top").on("click",function(){
    $(window).scrollTop(0);
});

논리는 간단합니다. 상단 버튼으로 스크롤할 때 click 이벤트를 수신하기 위해 이벤트 핸들러를 연결했습니다.

콜백은 $(window).scrollTop(0) 메서드를 실행하고 0을 인수로 전달했기 때문에 페이지 상단으로 스크롤했습니다.

여기에서 작업 데모를 볼 수 있습니다.

jQuery animate() 메서드로 애니메이션을 적용하여 페이지 맨 위로 스크롤

위의 바닐라 JS 솔루션과 마찬가지로 jQuery를 사용하여 페이지 상단으로 스크롤하여 UX를 개선할 수 있습니다.

$("#top").on("click",function(){
    $([document.documentElement,document.body]).animate({
        scrollTop:0
    },1000)
});

여기에서 논리를 살펴보겠습니다.

이벤트 리스너에 대한 콜백은 먼저 document.documentElement(루트 요소) 또는 document.body를 선택했습니다. 브라우저 간 호환성을 보장하려면 둘 다 선택해야 합니다.

(힌트: 이것이 우리가 jQuery를 사용하는 이유 중 하나입니다. 나중에 자세히 설명합니다.)

그런 다음 선택한 객체에서 animate() 메서드를 실행하고 scrollTop 속성을 0 값에 도달하도록 변경했습니다(페이지 상단).

마지막으로 애니메이션 지속 시간을 콜백의 두 번째 인수로 전달합니다. 여기에서 1000밀리초를 넘겼지만 원하는 시간 범위를 선택할 수 있습니다.

이 방법의 작업 출력은 다음과 같습니다.

전문가 팁: 더 나은 브라우저 간 호환성을 보장하기 위해 jQuery를 사용합니다. 때로는 UI가 다른 브라우저에서 이상하게 렌더링될 수 있으며 문제를 해결하기 어려울 수 있습니다.

jQuery는 전문 프론트엔드 라이브러리이기 때문에 이러한 브라우저 간 비호환성 문제를 해결할 수 있는 이점이 있습니다. 따라서 일부 브라우저에서 바닐라 JS 솔루션이 중단되는 경우 대신 jQuery 버전의 메서드를 사용할 수 있습니다.

One-Line Clever Pure HTML 페이지 맨 위로 스크롤 해킹

한 줄의 HTML 해킹으로 페이지 상단(애니메이션 없이)으로 스크롤할 수도 있습니다.

<div>
    <a href="#">To Top</a>
</div>

다음은 출력 데모입니다.

이전 scrollTop 속성을 사용하여 페이지 맨 위로 스크롤

일부 브라우저에는 위에서 사용한 바닐라 JS scrollTo() 메서드에 문제가 있습니다. 예를 들어 많은 사용자가 MS Edge가 이 방법으로 항상 잘 작동하는 것은 아니라고 보고합니다.

따라서 scrollTop 속성과 함께 이전 방식을 대신 사용할 수 있습니다. scrollTop 속성은 요소를 세로로 스크롤하려는 픽셀을 설정합니다.

그러나 이 속성의 특별한 경우는 루트 또는 html 요소에 적용하면 전체 문서를 이동합니다.

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

이 속성을 사용하여 페이지 상단으로 스크롤할 수 있습니다.

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  document.getElementsByTagName('html')[0].scrollTop = 0;
});

코드는 간단합니다. 콜백은 html 요소를 선택하고 scrollTop 속성을 0으로 설정했습니다.

아래에서 작업 데모를 볼 수 있습니다.

JavaScript 애니메이션 스크립트를 사용하여 페이지 상단으로 사용자 정의 스크롤

마지막으로 사용자 정의 스크롤 to top JavaScript 애니메이션을 고안할 수 있는 멋진 스크립트가 있습니다. setInteval() 및 clearInterval() 함수를 사용하여 애니메이션 효과를 실행합니다.

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  let customAnimScroll = window.setInterval(function() {
    let topOffset = window.pageYOffset;
    if (topOffset > 0) {
      window.scrollTo({top: topOffset - 20});
    } else {
      clearInterval(customAnimScroll);
    }
  }, 20);
});

여기에서 논리를 분해해 보겠습니다.

위로 스크롤 버튼의 이벤트 핸들러에 대한 콜백 내부의 window 객체에 대해 setInterval() 함수를 실행했습니다. setInterval 함수는 특정 기간 후에 전달된 콜백을 반복적으로 실행했습니다.

또한 setInterval() 메서드의 특정 인스턴스를 시작/중지/수정하기 위해 저장한 ID를 반환했습니다. 그래서 setInterval() 메소드를 실행하고 customAnimScroll 변수에 ID를 저장했습니다.

setInterval() 함수에 대한 콜백은 topOffset 변수에 window 객체의 pageYOffset 값을 저장했습니다. 이 값은 window 개체가 아래로 스크롤되는 픽셀 수입니다.

마지막으로 topOffset 값이 0보다 큰지 확인했습니다(window가 일부 픽셀만큼 아래로 스크롤됨을 의미). 그렇다면 위에서 본 scrollTo 메서드를 사용하여 window를 새 형식으로 20픽셀 위로 이동합니다.

여기서는 모든 주기에 대해 20픽셀 위로 이동하도록 선택했지만 다른 숫자를 선택할 수 있습니다.

topOffset 값이 0보다 크지 않으면 window의 맨 위로 스크롤한 것입니다. 이 경우 customAnimScroll 변수에 이전에 저장한 ID를 clearInterval() 메서드에 전달하여 setInterval() 함수를 종료했습니다.

여기에서 작업 데모를 볼 수 있습니다.