기본 js를 사용하여 top_javascript 기술로 돌아가는 간단한 슬라이딩 효과 만들기

많은 웹페이지는 하단에 "맨 위로 돌아가기" 버튼을 배치합니다. 특히 페이지 하단에 탐색 기능이 없는 웹페이지는 방문자가 탐색을 다시 찾거나 광고를 검토하는 데 도움이 됩니다(정말 멋진 아이디어입니다). 최근 몇 년 동안 JavaScript가 점점 더 널리 사용됨에 따라 슬라이딩 효과가 어디에나 있으므로 이에 따라 최상위로 돌아가는 기능을 슬라이딩 효과로 만들었습니다. 이후 물리적 특성에 더 잘 맞도록 감속 슬라이딩 효과를 갖도록 수정되었습니다.

먼저 원리에 대해 이야기해 보겠습니다. 스크롤 막대에서 페이지 상단까지의 거리를 구한 다음 일정 거리만큼 위로 이동한 다음 스크롤 막대에서 페이지 상단까지의 거리를 구합니다. 그리고 일정 거리 위로 이동합니다(지난번보다 약간 작음).

<script type="text/javascript"> 
/** 
* 回到页面顶部 
* @param acceleration 加速度 
* @param time 时间间隔 (毫秒) 
**/
function goTop(acceleration, time) { 
acceleration = acceleration || 0.1; 
time = time || 16; 

var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
var x3 = 0; 
var y3 = 0; 

if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
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 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 

// 如果距离不为零, 继续调用迭代本函数 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 
</script>

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

사용방법은?

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

TOP>