CSS

#goTopBtn, #goBottom, #shangy, #xiay, #menuPage, #lPage, #fPage{

width: 18px;

line-height: 1.2;

padding: 5px 0;

font-size: 12px;

text-align: center;

position: fixed;

right: 10px;

cursor: pointer;

filter: Alpha(opacity=30);

opacity=.3;

font-weight:bold;

}

#goTopBtn, #goBottom, #menuPage, #lPage, #fPage{

background-color:#999;

color:#000;

}

#shangy, #xiay, #lPage, #fPage{

background-color: #bbb;

color: #000;

}

#fPage{

bottom: 236px;

height:42px;

white-space:nowrap;

overflow:hidden;

//writing-mode:tb-rl;

}

#menuPage{

bottom: 198px;

height:27px;

white-space:nowrap;

overflow:hidden;

}

#lPage{

bottom: 145px;

height:42px;

white-space:nowrap;

overflow:hidden;

}

#goTopBtn{

bottom: 105px;

}

#goBottom {

bottom: 30px;

}

#shangy {

bottom: 80px;

}

#xiay {

bottom: 55px;

}

#goTopBtn:hover, #goBottom:hover, #shangy:hover, #xiay:hover, #menuPage:hover, #lPage:hover, #fPage:hover{

background-color:#ccc;

border:#ccc 0px solid;

}

#goTopBtn a:link, #goBottom a:link, #xiay a:link, #shangy a:link, #menuPage a:link, #menuPage a:visited, #lPage a:link, #fPage a:link, #lPage a:visited, #fPage a:visited {

text-decoration: none;

color:white;

}

2 HTML

<div id="fPage"><a id="fPagea" href="javascript：void(null)" target="_self">上<br />一<br />页</a></div>

<div id="menuPage"><a href="index.html" target="_self">目<br />录</a></div>

<div id="lPage"><a id="LPagea" href="javascript：void(null)" target="_self">下<br />一<br />页</a></div>

<div style="display:none" id="goTopBtn"><a target="_self" style="color:#fff;">&and;</a></div>

<div style="display:none" id="shangy">

<a onclick="shangy()" target="_self" style="color:#fff;">&uarr;</a></div>

<div id="xiay">

<a onclick="xiay()" target="_self" style="color:#fff;">&darr;</a></div>

<div id="goBottom">

<a onclick="downn()" target="_self" style="color:#fff;">&or;</a></div>

3 JS

<script type=text/javascript>

goTopEx();

function xiay(){

window.scrollBy(0,window.innerHeight-10);

}

function shangy(){

window.scrollBy(0,-window.innerHeight+10);

}

var obj3=document.getElementById("xiay");

var obj4=document.getElementById("goBottom");

function getHeight(){

if(browser4=="ch"){

//谷歌浏览器

return document.body.clientHeight;

}else{

//IE、firefox等浏览器

return document.documentElement.clientHeight;

}

}

getHeight()<window.innerHeight+50?obj3.style.display="none":obj3.style.display="";

getHeight()<window.innerHeight+50?obj4.style.display="none":obj4.style.display="";

if(browser4!="ch"){//firefox需要尝一下才显示向下图标

xiay();

shangy();

}

//上一页、下一页按钮，需要文件名是数字

var strUrl=window.location.href;

var arrUrl=strUrl.split("/");

var thispage=arrUrl[arrUrl.length-1];

var thispage2=thispage.split(".");

var thispage3=thispage2[thispage2.length-2];

if(thispage3 == 1){

var obj5=document.getElementById("fPage");

obj5.style.display="none"

}else{

var fpage = thispage3 - 1;

fpage = fpage +".html"

document.getElementById("fPagea").href=fpage;

}

if(thispage3 == 100){

var obj6=document.getElementById("lPage");

obj6.style.display="none"

}else{

var fpage = thispage3 - 1;

fpage = fpage +".html"

document.getElementById("fPagea").href=fpage;

}

</script>

当将鼠标停留在“上一面”按钮处时，网页效果如下：

-End-