순수 JavaScript를 사용하여 크로스 브라우저 스크롤-투-톱 애니메이션을 어떻게 구현할 수 있습니까?

크로스 브라우저 JavaScript 스크롤 애니메이션(jQuery 제외)

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

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

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

   <code class="javascript">function scrollTo(element, to, duration) {</code>

   로그인 후 복사

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

   <code class="javascript">  if (duration <= 0) return;
     var difference = to - element.scrollTop;
     var perTick = difference / duration * 10;

   로그인 후 복사

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

   <code class="javascript">  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

   로그인 후 복사

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

   <code class="javascript">scrollTo(document.body, 0, 600);

   로그인 후 복사

5. 클릭 이벤트 리스너 추가: 스크롤 애니메이션을 트리거하고, 클릭할 때 함수를 호출하는 클릭 이벤트 리스너를 추가합니다.

   <code class="html"><button id="scrollme" type="button">To the top</button></code>

   로그인 후 복사

   <code class="javascript">var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);</code>

   로그인 후 복사

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

위 내용은 순수 JavaScript를 사용하여 크로스 브라우저 스크롤-투-톱 애니메이션을 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!