크로스 브라우저 JavaScript 스크롤 상단 애니메이션(jQuery 없음)

많은 웹 개발자가 원활한 페이지 스크롤 기능을 위해 jQuery를 사용합니다. 그러나 외부 라이브러리를 피하고 싶은 사람들을 위해 순수 JavaScript를 사용하여 페이지 상단으로 스크롤하는 간단한 솔루션이 있습니다.

브라우저 간 스크롤 상단 애니메이션을 구현하려면 다음 단계를 따르세요.

1. scrollTo 함수 정의: 세 가지 매개변수(요소, 대상, 기간)를 사용하는 함수를 만듭니다. 이 함수는 애니메이션을 처리합니다.

   function scrollTo(element, to, duration) {

2. 차이 및 틱당 증분 계산: 함수 내에서 현재 스크롤 위치와 원하는 위치(to) 사이의 차이를 계산하고 이를 기간으로 나누어 틱당 증분을 결정합니다.

     if (duration 

3. 애니메이션 루프 설정: setTimeout을 사용하여 10밀리초의 빈도로 실행되는 애니메이션 루프를 설정합니다. 루프 내에서 틱당 증분만큼 스크롤 위치를 증가시켜 원하는 위치에 도달했는지 확인합니다.

     setTimeout(function() {
    element.scrollTop = element.scrollTop   perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

4. 사용법: 페이지 상단으로 부드럽게 스크롤하려면 다음과 같이 scrollTo 함수를 호출합니다.

   scrollTo(document.body, 0, 600);

5. 클릭 이벤트 리스너 추가: 스크롤 애니메이션을 트리거해야 하는 링크나 버튼이 있는 경우, 클릭할 때 함수를 호출하려면 클릭 이벤트 리스너를 추가하세요.

   To the top

   var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);

이 순수 JavaScript 코드는 브라우저 간 스크롤을 상단 애니메이션으로 구현하는 간단하면서도 효과적인 방법을 제공하여 사용자 기능을 향상시킵니다. jQuery와 같은 외부 라이브러리가 필요 없는 탐색.