很多網頁在下方都會放置一個“返回頂部”按鈕，尤其是頁面底部沒有導航的網頁，這樣可以幫助訪客重新找到導航或者重溫一遍廣告（想得真美）。隨著近幾年來 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>
新聞熱點
疑難解答
圖片精選
