1. 最簡單的靜態返回頂部,點擊直接跳轉頁面頂部,常見於固定放置在頁面底部返回頂部功能
2. 簡單的靜態回傳頂部,用js模擬滾動效果上滑至頂部
程式碼如下:
function gotoTop(min_height){
//預定義回傳頂部的html程式碼,它的css樣式預設為不顯示
var gotoTop_html = '
返回頂部
';
//將返回頂部的html代碼插入頁面上id為page的元素的末尾
$("#page"). append(gotoTop_html);
$("#gotoTop").click(//定義返回頂部點擊向上滾動的動畫
function(){$('html,body').animate({scrollTop:0 },700);
}).hover(//為回傳頂部增加滑鼠進入的回饋效果,用新增刪除css類別實作
function(){$(this).addClass("hover"); },
function(){$(this).removeClass("hover");
});
//取得頁面的最小高度,無傳入值則預設為600像素
min_height ? min_height = min_height : min_height = 600;
//為視窗的scroll事件綁定處理函數
$(window).scroll(function(){
//取得視窗的捲軸的垂直取得位置
var s = $(window).scrollTop();
//當視窗的捲軸的垂直位置大於頁面的最小高度時,讓返回頂部元素漸現,否則漸隱
if ( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
這種方法判斷頁面高度按需將「返回頂部「展示給用戶,用css樣式實現了螢幕絕對定位,借助jQuery實現了更好用平滑的滾動效果。進一步考慮如果用戶設定了瀏覽器禁用js,那麼我們可以將第三方案結合第一方案方法一,禁用js後第三方案將不被用戶所見,未禁用的話我們在js程式碼中再加上一句隱藏第一方案。