評：以前我們想回頂部的時候要不斷往上滾動滑鼠的滾輪，直到滾到頂部為止；現在可以看到右下角有一個點擊回到頂部的按鈕;今天我要說的就這個按鈕的布局，感興趣的你可千萬不要錯過，希望本例知識可以協助到你現在很多門戶網站頁面內容龐大，都會往下拉很長， 在以前我們想回頂部的時候要不斷往上滾動滑鼠的滾輪，直到滾到頂部為止，現在如果大家細心觀察右下角是不是有一個點擊回到頂部的按鈕呢，對， 今天我要說的就這個按鈕的布局，閑話不多說，直接上代碼，在代碼中我盡量的標註css樣式，以方便大家閱讀；
複製代碼
代碼如下:
<!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>fixed定位，解決IE6閃動問題</title>
<style type="text/css">
*html{
background-image:url(about:blank);
background-attachment:fixed;
}/*此代碼解決IE6.0下不會出現閃動*/
.backgroundBox {
border:1px solid orange;
width:100px;
height:2000px;
}
.fixedBox {
border:1px solid red;
width:100px;
height:100px;
position:fixed; /*支援實現w3c標準的瀏覽器*/
_position:absolute; /*單獨針對IE6*/
left:200px; /*距離頂部200px*/
top:200px; /*距離右邊200px*/
_top:expression(eval(document.documentElement.scrollTop+200)); /*+200是IE6.0下面距離瀏覽器視窗頂部的位置*/
/*IE6.0下面距離底部位置為0px*/
/*_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));*/
}
</style>
</head>
<body>
<div class="backgroundBox"></div>
<div class="fixedBox">fixed box</div>
</body>
</html>
