top_javascript 기술로 다시 가변 속도를 달성하는 JavaScript 코드

최근에는 JavaScript의 적용이 점점 더 널리 퍼지면서 슬라이딩 효과가 곳곳에 있으므로 이에 따라 최상위 기능을 슬라이딩 효과로 만들었습니다. 나중에는 물리적 특성에 더 잘 맞도록 감속하는 효과로 변형되었습니다. 슬라이딩 효과
먼저 스크롤 막대에서 페이지 상단까지의 거리를 구한 다음 일정 거리만큼 위로 이동한 다음 스크롤 막대에서 페이지 상단까지의 거리를 구해 보겠습니다. 페이지를 이동하고 (지난번보다 조금 더 작게) ..
JavaScript 코드:

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

/**
* 페이지 위로 가기
* @param 가속 가속도
* @param 시간 시간 간격(밀리초)
**/
function goTop(acceleration, time) {
acceleration = 가속도 || 🎜>시간 = 시간 || 16;
var y1 = 0
var y2 = 0; 🎜>var y3 = 0; if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 🎜>if (document.body) {
x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0
var x3 = window.scrollX; || 0;
var y3 = window.scrollY || 0;
// 페이지 상단까지의 수평 거리
var x = Math.max(x1, Math.max(x2, x3));// 스크롤 막대에서 페이지 상단까지의 수직 거리
var y = Math.max (y1, Math.max(y2, y3))//스크롤 거리 = 현재 거리/속도, 거리가 작을수록 속도는 1보다 큰 숫자이므로 구르는 거리는 점점 작아집니다.
var speed = 1 가속도
window.scrollTo(Math.floor; (x / 속도), Math.floor(y / 속도))
// 거리가 0이 아닌 경우 이 반복 함수를 계속 호출합니다
if(x > 0 || y > 0) {
var activateFunction = "goTop(" 가속도 ", " 시간 ")"
window.setTimeout(invokeFunction, time)
}
}


문서 .documentElement.scrollTop, document.body.scrollTop, window.scrollY는 실제로 동일하지만 일부 브라우저에서만 작동합니다. 어떤 브라우저에서 작동하는지 디버깅할 수 있습니다.
HTML 코드:




코드 복사


코드는 다음과 같습니다.

TOP