jQuery 없이 맨 위로 부드러운 애니메이션 스크롤을 만드는 방법은 무엇입니까?

많은 브라우저에서 위쪽으로 스크롤 애니메이션(jQuery 제외)

부드러운 애니메이션 "맨 위로 스크롤" 효과 구현 웹 페이지는 일반적인 요구 사항입니다. 그러나 jQuery와 같은 외부 JavaScript 라이브러리에 의존하는 것은 바람직하지 않을 수 있습니다. 이 기사에서는 추가 프레임워크 없이 이러한 애니메이션을 제작할 수 있는 크로스 브라우저 솔루션을 제시합니다.

스크립트 이해

제공된 코드에는 재귀 함수가 포함되어 있습니다. 세 가지 매개변수를 사용하는 scrollTo라고 합니다.

1. element: 스크롤할 대상 요소(예: document.body)
2. to: 원하는 스크롤 위치(예: 맨 위로 스크롤하려면 0)
3. duration: 밀리초 단위의 애니메이션 지속 시간

이 함수는 요소의 현재 스크롤 위치와 원하는 위치를 선택하고 10밀리초마다 간격을 메우기 위해 작은 증분을 적용합니다. 이는 점진적이고 부드러운 스크롤 효과를 만들어냅니다.

사용 예

이 솔루션을 사용하려면 답변에 제공된 JavaScript 스니펫을 포함하고 리스너를 생성하기만 하면 됩니다. 스크롤을 시작하는 데 사용하려는 요소의 클릭 이벤트. 예는 다음과 같습니다.

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

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

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

위 내용은 jQuery 없이 맨 위로 부드러운 애니메이션 스크롤을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!