CSS了一個浮動導航條

標籤：返回頂部   style   java   os   io   for   ar   div   

絕對瀏覽器視窗定位positio：FIXED；

下拉後出現返回頂部按鈕

圖片是我們美工給做的。55*55px，中間縫隙3px。

css：

html,body {
height:100%
}
html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd {
margin:0;
padding:0;
border:0
}
ul,ol {
list-style:none
}
body {
background:#fff;
font:12px/1.5 arial,sans-serif;
text-align:center;
height:3000px;
}
a {
text-decoration:none
}
a:hover {
text-decoration:underline
}

#moquu_top,#moquu_f1,#moquu_f2,#moquu_f3,#moquu_f4 {
z-index:2;
width:55px;
height:55px;
right:50%;
position:fixed;
cursor:pointer;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))
}

#moquu_f1 {
top:360px;
_margin-top:360px
}
#moquu_f1 a {
background:url(../images/fbtn.png) -3px -1px;
right:0;
float:left;
width:55px;
height:55px;
text-indent:-9999px
}
#moquu_f1 a:hover {
background:url(../images/fbtn.png) -58px -1px
}
#moquu_f2 {
top:422px;
_margin-top:422px
}
#moquu_f2 a {
background:url(../images/fbtn.png) -3px -59px;
width:55px;
height:55px;
right:0;
float:left;
text-indent:-9999px
}
#moquu_f2 a:hover {
background:url(../images/fbtn.png) -58px -59px
}
#moquu_f3 {
top:484px;
_margin-top:484px
}
#moquu_f3 a {
background:url(../images/fbtn.png) -3px -117px;
width:55px;
height:55px;
right:0;
float:left;
text-indent:-9999px
}
#moquu_f3 a:hover {
background:url(../images/fbtn.png) -58px -117px
}
#moquu_f4 {
top:546px;
_margin-top:484px
}
#moquu_f4 a {
background:url(../images/fbtn.png) -3px -175px;
width:55px;
height:55px;
right:0;
float:left;
text-indent:-9999px
}
#moquu_f4 a:hover {
background:url(../images/fbtn.png) -175px -175px
}

#moquu_top {
top:608px;
_margin-top:608px;
background:url(../images/fbtn.png) -3px -231px;
width:55px;
height:55px
}

#moquu_top:hover {
background:url(../images/fbtn.png) -62px -231px
}
.moquu_f1,.moquu_f2 {
position:relative;
z-index:2
}
.moquu_f1 a:hover .moquu_f1h,.moquu_f2 a:hover .moquu_f2h {
display:block
}

 

body：

<div id="moquu_f1" class="moquu_f1"><a href="javascript:void(0)"> <div class="moquu_f1h"></div></a></div>
<div id="moquu_f2" class="moquu_f2"><a href="javascript:void(0)"> <div class="moquu_f2h"></div></a></div>
<div id="moquu_f3"><a href="javascript:void(0)" class=‘moquu_f3‘> </a></div>
<div id="moquu_f4"><a href="javascript:void(0)" class=‘moquu_f3‘> </a></div>
<a id="moquu_top" href="javascript:void(0)"></a>

 

 

哦對了。JS兩個 jquery1.5.1min&jquery