首頁 >web前端 >js教程 >javascript返回頂部效果(自寫程式碼)_javascript技巧

javascript返回頂部效果(自寫程式碼)_javascript技巧

WBOY原創: 2016-05-16 17:44:251205瀏覽

現在很多網站都用到了回到頂部的效果，當然懶的話也可以直接 a 連結鏈到 #，這樣也可以達到效果。今天抽空用原生 javascript 寫了個，由於本人水平有限，如有問題請指出。
html 程式碼：

複製程式碼程式碼如下:

js -回到頂部

「記事本」是用來建立簡單的文件的基本的文字編輯器。「記事本」最常用來檢視或編輯文字 (.txt) 文件，但許多使用者發現「記事本」是建立網頁的簡單工具。

因為「記事本」只支援很基本的格式，所以您不能在需要保持純文字的文件中偶爾儲存特殊格式。因為特殊字元或其他格式不能在所發布的網頁上顯示，否則可能導致錯誤，所以，在為網頁建立 HTML 文件時它特別有用。

可以將記事本檔案儲存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當使用不同字元集的文件時，這些格式可以為您提供更大的靈活性。

「記事本」是一個用來建立簡單的文件的基本的文字編輯器。「記事本」最常用來檢視或編輯文字 (.txt) 文件，但許多使用者發現「記事本」是建立網頁的簡單工具。

可以將記事本檔案儲存為 Unicode、ANSI、UTF-8 或高位在前的 Unicode 格式。當使用不同字元集的文件時，這些格式可以為您提供更大的靈活性。

回到頂部

toTop.js 程式碼:

複製程式碼


 程式碼如下:

 
//第一個參數是按鈕id；第二個參數是布林值，true是一直顯示按鈕，false是當滾動距離不為0時，顯示按鈕
function toTop(id,show){ 
var oTop = document.getElementById(id); 
var bShow = show; 
if(!bShow ){ 
oTop.style.display = 'none'; 
setTimeout(btnShow,50); 
} 
oTop.onclick = scrollToTop; 
function scrollTop(){ var iSpeed = Math.floor(-scrollTop/2); 
if(scrollTop if(!bShow) { 
oTop.style.display = 'none'; 
} 
return; 
} 
document.documentElement.scrollTop = document.body.scrollTop = scrollTop iSpeed; arguments.callee,50); 
} 

function btnShow(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop oTop.style.display = 'none'; }else{
oTop.style.display = 'block'; } setTimeout(arguments.callee,50); } }

注意
： ie6 下position:fixed 無效，具體相容請點選瀏覽器的各種bug
。另外以前寫過一篇
css解決ie6下position:fixed失效
，並不支援該效果。

PS

：這是本人閒著無聊，透過自己所學的 javascript 知識，隨意寫的一些效果。第二種方法：很多網頁在下方都會放置一個「回到頂部」按鈕，尤其是頁面底部沒有導航的網頁，這樣可以幫助訪客重新找到導航或者重溫一遍廣告（想得真美）。隨著近年來 JavaScript 的應用日漸廣泛，滑動效果無所不在，於是我也跟風，將返回頂部功能做成了滑動效果。後來為了更貼合物理特徵，改造做成了減速的滑動效果。

先說一下原理吧，我們會取得滾動條到頁面頂部的距離，然後上移一定的距離；再獲取滾動條到頁面頂部的距離，上移一定的距離（比上一次小一點）;以此類推...

先上程式碼吧： 

複製程式碼

 程式碼如下:

// 滾動距離= 目前距離/ 速度, 因為距離原來越小, 速度是大於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); } }
document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其實都是一樣的，但它們只在某些瀏覽器中起作用。至於那哪個在哪些瀏覽器起作用可以自己調試一下。
如何使用？

複製程式碼程式碼如下:

TOP

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery外掛開發基礎簡單介紹_jquery下一篇：jQuery外掛開發基礎簡單介紹_jquery

看更多

javascript返回頂部效果(自寫程式碼)_javascript技巧

相關文章