>웹 프론트엔드 >JS 튜토리얼 >자바스크립트는 단순히 웹페이지의 최상위로 돌아가는 기능을 구현한 것입니다_javascript 기술

자바스크립트는 단순히 웹페이지의 최상위로 돌아가는 기능을 구현한 것입니다_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 17:15:54983검색

많은 웹 페이지는 하단에 "맨 위로 돌아가기" 버튼을 배치합니다. 특히 페이지 하단에 탐색 기능이 없는 웹 페이지에서는 방문자가 탐색을 다시 찾거나 광고를 검토하는 데 도움이 됩니다(정말 멋진 아이디어입니다). 최근 몇 년 동안 JavaScript가 점점 더 널리 사용됨에 따라 슬라이딩 효과가 어디에나 있으므로 이에 따라 최상위로 돌아가는 기능을 슬라이딩 효과로 만들었습니다. 이후 물리적 특성에 더 잘 맞도록 감속 슬라이딩 효과를 갖도록 수정되었습니다.
먼저 원리에 대해 이야기해 보겠습니다. 스크롤 막대에서 페이지 상단까지의 거리를 구한 다음 일정 거리만큼 위로 이동한 다음 스크롤 막대에서 페이지 상단까지의 거리를 구합니다. 그리고 특정 거리 위로 이동합니다(지난번보다 조금 더 작게).

코드 복사 코드는 다음과 같습니다.



document .documentElement.scrollTop, document.body.scrollTop, window.scrollY는 실제로 동일하지만 일부 브라우저에서만 작동합니다. 어떤 브라우저가 어떤 브라우저에서 작동하는지 직접 디버깅할 수 있습니다.
사용방법은?
코드 복사 코드는 다음과 같습니다.

TOP
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.