CSS實現網頁“回到頂部”的效果代碼

2024-09-05 12:18:15

字體：大中小

來源：轉載

供稿：網友

CSS實現網頁“回到頂部”的效果代碼，用CSS hack實現IE6的兼容，功能：
　　1、和論壇的回頂部懸浮層基本一樣，當瀏覽器的滾動條滾動(>0)時，懸浮層出現，當滾動條滾動為0時隱藏，用到了window.onscroll事件。
　　2、當瀏覽器窗口大小發生改變時，懸浮層的位置改變，用到了window.onresize事件，使懸浮層始終位于可視窗口的右下方

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>回到頂部</title><style type="text/css">html{	_overflow:hidden;	}body{	_overflow:auto;	height:100%;}#div{	background:#ccc;	width:400px;	height:1500px;	text-align:center;}#returntop{	border:1px #ccc solid;	background:#F30;	width:80px;	height:30px;	position:fixed;	_position:absolute;	line-height:30px;	text-align:center;	top:0px;	left:0px;	display:none;	cursor:pointer;}a{	text-decoration:none;}</style></head><body><div   class="iwvjtn8m0"   id="div">這是頂部</div><div   class="iwvjtn8m0"   id="returntop">回頂部</div><script type="text/javascript">var getDiv=document.getElementById('returntop');getDiv.onclick=function(){	window.scrollTo(0,0);}window.onscroll=function(){	if(document.documentElement.scrollTop){		getDiv.style.display="block";	}else if(document.body.scrollTop){		getDiv.style.display="block";	}else{		getDiv.style.display="none";		}}function getWinSize(){	var winHeight=window.innerHeight,winWidth=window.innerWidth;	if(document.documentElement.clientHeight){		winHeight=document.documentElement.clientHeight;		winWidth=document.documentElement.clientWidth;	}else{		winHeight=document.body.clientHeight;		winWidth=document.body.clientWidth;	}    var height=winHeight-50;	var width=winWidth-100;	getDiv.style.top=height+"px";	getDiv.style.left=width+"px";}getWinSize();window.onresize=getWinSize;</script></body></html>

下一篇：超酷的HTML 3D動態效果代碼