全代碼打造簡潔美觀回到頂部按鈕

狂人隱士 2012-09-19

展開全文

這次，潛行者m給大家?guī)硪粋€比較實用的 jQuery 技巧，為你的網(wǎng)站添加一個純代碼畫出來的、簡潔美觀的回到頂部按鈕。這個按鈕的效果就是，當(dāng)頁面滑動一段距離之后，就會浮現(xiàn)出來這個按鈕，點擊這個按鈕之后，就自動滾動到頂部。

點擊之后就會跳轉(zhuǎn)到頂部，然后這個按鈕平滑消失。與網(wǎng)上的相比，潛行者m版的是純代碼，加載速度更快，效果色彩控制好；代碼精簡，只有數(shù)條而已，拒絕大坨大坨的代碼。廢話不多說，下面就開始制作。

HTML 結(jié)構(gòu)

我使用了 a 標(biāo)簽作為這個結(jié)構(gòu)，可能不太標(biāo)準(zhǔn)，但是比較方便。在 a 標(biāo)簽中，內(nèi)置了一個 span 標(biāo)簽，用來顯示三角號。具體代碼如下：

<a id="gotop" href="#">   
  <span>▲</span> 
</a>

對，你沒看錯，就這么簡單的一句代碼，直接在 a 標(biāo)簽中，填寫一個三角號。剩下的就是使用 CSS 進(jìn)行樣式控制。

CSS 代碼

#gotop{ 
	display:block;  
	width:60px; 
	height:60px;
	position:fixed;  
	bottom:50px;  
	right:40px; 
	border-radius:10px 10px 10px 10px;   
	text-decoration:none;  
	display:none;  
	background-color:#999999;     
}

上面這段代碼，定義了 a 標(biāo)簽的外觀樣式，定義 display 為 block，這樣，我們才能指定它的 width 和 height。定義 position 為fixed，讓它固定在右下角。同時為它指定圓角，就是使用 border-radius 屬性，定于半徑為10px的圓角。

#gotop span{ 
	display:block; 
	width:60px; 
	color:#dddddd; 
} 
#gotop span:hover{ 
	color:#cccccc; 
} 
#gotop span{ 
	font-size:40px; 
	text-align:center; 
	margin-top:4px; 
}

上面這一段，就是定義了 span 標(biāo)簽里面的三角號，至于如何打出這個“三角號”，使用搜狗輸入法，按下“Ctrl + Shift + z”，就會彈出搜狗的特殊字符，就可以找到了。這幾句代碼意思很簡單，就是定義了三角號的外觀樣式，同時制定了顏色變化，這是為了用戶體驗。最下面的 margin-top：4px，則是用來準(zhǔn)確定位三角號，讓它居中顯示。

jQuery 代碼

具體的 jQuery 代碼如下，解析已經(jīng)寫在注釋里面了：

$(function(){
	$(window).scroll(function(){  //只要窗口滾動,就觸發(fā)下面代碼 
		var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //獲取滾動后的高度 
		if( scrollt >200 ){  //判斷滾動后高度超過200px,就顯示  
			$("#gotop").fadeIn(400); //淡出     
		}else{      
			$("#gotop").stop().fadeOut(400); //如果返回或者沒有超過,就淡入.必須加上stop()停止之前動畫,否則會出現(xiàn)閃動   
		}
	});
	$("#gotop").click(function(){ //當(dāng)點擊標(biāo)簽的時候,使用animate在200毫秒的時間內(nèi),滾到頂部
			$("html,body").animate({scrollTop:"0px"},200);
	});
});