動(dòng)畫(huà)回到網(wǎng)頁(yè)頂部，使用了jQuery 1.4

2024-09-05 12:18:07

字體：大中小

供稿：網(wǎng)友

回到網(wǎng)頁(yè)頂部的一個(gè)功能，動(dòng)畫(huà)版的，點(diǎn)擊后滾動(dòng)至網(wǎng)頁(yè)頂部，引用了jQuery 1.4版本，代碼超簡(jiǎn)潔，也可借此機(jī)會(huì)學(xué)習(xí)一下jQuery插件的用法，一舉兩得哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>有趣的動(dòng)畫(huà)回到頂部</title><script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){	$(window).scroll(function(){		var $scrollTop = $(window).scrollTop();		if($(window).scrollTop() > $(window).height()/2){			var $wt = parseInt(($(window).height())*0.9);			var $getTop = parseInt($scrollTop)+$wt;			$("#content").fadeIn(500).animate({"top":$getTop + "px"},{duration:600,queue:false});		}else if($(window).scrollTop() <= $(window).height()/2){			$("#content").fadeOut();		}	})})</script><style type="text/css"></style></head><body>	<div class="iwvjtn8m0" id="content">Top</div> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</body></html>

上一篇：頁(yè)面頂部和底部切換功能，仿twitter效果

下一篇：JS版返回網(wǎng)頁(yè)頂部精簡(jiǎn)版代碼