순수 JavaScript를 사용하여 브라우저에 구애받지 않는 스크롤 애니메이션을 만드는 방법은 무엇입니까?

브라우저에 구애받지 않는 스크롤 투 톱 애니메이션

링크에 대한 간단한 "맨 위로 스크롤" 애니메이션을 만드는 작업에 직면했을 때, jQuery나 MooTools와 같은 JavaScript 라이브러리를 사용하고 싶은 유혹이 있습니다. 그러나 순수한 JavaScript를 사용하여 이 효과를 달성할 수 있으며 브라우저 간 호환성을 보장합니다.

제공된 코드는 지정된 기간 동안 문서를 위로 다시 우아하게 밀어내는 스크롤 애니메이션을 구현합니다. 스크롤바가 있는 모든 요소에 적용할 수 있는 독립형 기능으로, 페이지 상단으로 빠르게 돌아갈 수 있도록 하여 더 나은 사용자 경험을 제공합니다.

1. 함수 시그니처:

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

• 요소: 스크롤할 요소(일반적으로 html 또는 본문 요소).
• to: 대상 스크롤 위치(픽셀)
• 기간: 애니메이션 기간(밀리초).

2. 애니메이션 로직:

• 기간이 양수가 아닌 경우 , 함수는 즉시 반환됩니다.
• 대상 스크롤 위치와 현재 스크롤 위치의 차이가 계산됩니다.
• perTick 값이 계산되어 애니메이션 프레임당 증분 스크롤 양을 결정합니다.
• setTimeout을 사용하면 목표에 도달할 때까지 스크롤 위치가 10밀리초 간격으로 점진적으로 조정됩니다.

3. 사용 예:

제공된 HTML 스니펫에서 ID가 "scrollme"인 버튼은 애니메이션의 트리거로 사용됩니다.

<code class="javascript">function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)</code>

• 클릭하면 runScroll 함수가 scrollTo 애니메이션을 호출하여 페이지를 스크롤합니다. 최고 600밀리초가 넘습니다.

위 내용은 순수 JavaScript를 사용하여 브라우저에 구애받지 않는 스크롤 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!