최근에는 개발사 공개 계정 H5에 아이콘을 클릭하면 상단으로 스크롤되는 기능이 추가됐다. 이 함수는 구현하기가 비교적 간단합니다. window.scrollTo(0, 0)을 직접 호출하고 한 줄의 코드로 완료하면 됩니다. 하지만 공성사자로서 어떻게 나 자신에 대한 요구 사항이 이렇게 낮을 수 있었는지, 페이지를 맨 위로 부드럽게 스크롤하는 기능을 구현하기 위해 요구 사항을 추가했습니다. 문서를 조사하고 검토한 후 다음 세 가지 옵션이 있습니다.
1. CSS를 사용하세요최고 수준의 기능은 CSS만을 사용하여 수행할 수 있습니다. 코드는 다음과 같습니다:
html { 스크롤 동작: 부드러운;}이 스타일의 기능은 스크롤 막대가 있는 요소의 스크롤 동작을 지정하는 것입니다. 그러나 이는 사용자가 수동으로 탐색하거나 CSSOM 스크롤 API가 스크롤을 트리거할 때만 적용되며 사용자 동작으로 인한 스크롤에는 영향을 미치지 않습니다. 축하할 때, 사용할 수 있는지 열어서 호환성을 확인했습니다.
젠장, 그냥 JS로 구현해보자.
2. Window.scrollTo API 사용우리 모두는 window.scrollTo(x, y)가 문서의 x 및 y축 좌표를 전달하여 페이지의 특정 위치로 스크롤하는 기능을 구현한다는 것을 알고 있습니다. 이 API는 실제로 객체인 옵션을 전달할 수 있습니다. 왼쪽 값은 좌표의 x에 해당하고 상단은 좌표의 y에 해당하며 동작 값도 있어 사용자 정의할 수 있습니다. 그런 다음 다음과 같이 스크롤을 구현합니다.
window.scrollTo({ 왼쪽: 0, 위쪽: 0, 동작: '부드러운'})향이 너무 좋아요, 끝났어요. 며칠 뒤 제품 매니저가 5미터짜리 검을 들고 찾아와서 사파리에서 스크롤 효과가 이상하고 신체검사가 너무 안좋다고 하더군요. 그래서 나는 조용히 MDN 문서를 열고 맨 아래로 스크롤했습니다.
이 사진을 보면 거의 모든 API 브라우저가 지원하지만 옵션 옵션이 Safari에서 직접 끊기므로 다시 stackoverflow를 열어서 최종 솔루션을 요약했습니다.
3. requestAnimationFrame을 사용하세요.유명한 requestAnimationFrame을 자주 보는데, 한번도 사용해 볼 기회가 없었습니다. requestAnimationFrame의 기능은 다음 다시 그리기 전에 전달된 콜백 함수를 실행하도록 브라우저에 지시하는 것입니다. 이 동작은 브라우저에서 자동으로 수행됩니다. 따라서 다음과 같은 코드가 있습니다.
const scrollToTop = () => { let scrollTop = document.documentElement.scrollTo || document.body.scrollTop if (scrollTop > 0) { window.requestAnimationFrame(scrollTop) window.scrollTop(0, scrollTop - scrollTo / 8) }}완료! ! ! 완벽한! ! ! 신나는 중에 requestAnimationFrame의 호환성을 확인하는 데 사용할 수 있는지 켰습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.