많은 웹 페이지가 아래에 "다시 상단"버튼을 배치합니다. 특히 페이지 하단에 탐색이없는 웹 페이지는 방문자가 다시 탐색을 찾거나 광고를 다시 방문하는 데 도움이 될 수 있습니다 (너무 아름답습니다). 최근 몇 년 동안 JavaScript가 점점 더 널리 사용됨에 따라 슬라이딩 효과는 어디에나 있으므로 트렌드를 따라 최고 기능으로 돌아와 슬라이딩 효과를 만듭니다. 나중에, 물리적 특성에 더 잘 맞기 위해, 속도가 느려지는 슬라이딩 효과가 변형되었습니다.
먼저 원리에 대해 이야기합시다. 우리는 스크롤 막대에서 페이지 상단까지의 거리를 얻은 다음 특정 거리만큼 위로 이동합니다. 그런 다음 스크롤 막대에서 페이지 상단까지 거리를 가져 와서 특정 거리 (마지막 시간보다 약간 작음)로 이동하십시오. 등...
<script type = "text/javaScript">/*** 페이지 상단으로 돌아 가기* @Param Acceleration Acceleration* @param 시간 시간 간격 (MS) **/function gotop (가속도, 시간) {가속 = 가속도 || 0.1; 시간 = 시간 || 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 속도 = 1 + 가속도; Window.scrollto (Math.floor (X / Speed), Math.floor (Y / Speed)); // 거리가 0이 아닌 경우 (x> 0 || y> 0)이면 반복 함수를 계속 호출하십시오. {var invokeFunction = "gotop (" + acceleration + "," + time + "); Window.setTimeout (InvokeFunction, Time); }} </script>document.documentElement.scrolltop, document.body.scrolltop, window.scrolly는 실제로 동일하지만 일부 브라우저에서만 작동합니다. 어떤 브라우저가 작동하는지에 대해 직접 디버깅 할 수 있습니다.
그것을 사용하는 방법?
코드 사본은 다음과 같습니다.
<a href = "#"onclick = "gotop (); return false;"> top </a>