<!DOCTYPE html>
<html>
<head>
<title>返回顶部按钮的实现</title>
<meta charset=
"utf-8"
/>
<style>
body{
margin:0px;
}
#flypig{
display: none;
float: left;
position: fixed;
bottom: 20px;
margin-left: 75%;
cursor: pointer;
margin-bottom: 20px;
}
#go{
display: block;
float: left;
position: fixed;
bottom: 10px;
margin-left: 75%;
cursor: pointer;
}
</style>
<script>
window.onscroll =
function
(){
var
t = document.documentElement.scrollTop || document.body.scrollTop;
var
top_div = document.getElementById(
"go"
);
if
( t >= 300 ) {
top_div.style.display =
"block"
;
}
else
{
top_div.style.display =
"none"
;
}
}
var
ptt=20;
function
pageScroll() {
document.getElementById(
'flypig'
).style.display=
'block'
;
window.scrollBy(0,-10);
if
(document.body.scrollTop==0) {
document.getElementById(
'flypig'
).style.marginBottom=ptt+
'px'
;
ptt=ptt+10;
}
scrolldelay = setTimeout(
'pageScroll()'
,2);
if
(ptt>=1000){
ptt=0;
document.getElementById(
'flypig'
).style.marginBottom=20+
'px'
;
document.getElementById(
'flypig'
).style.display=
'none'
;
clearTimeout(scrolldelay);
}
}
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1 style=
"text-align:center;"
>请往下滑</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--让你的页面足够的长-->
<div style=
"display: none; float: left; position: fixed; margin-left: 50%; cursor: pointer; margin-bottom: 20px;"
id=
"flypig"
>
<img src=
"/wp-content/themes/Jakesoft/images/flypig.gif"
> </div>
<div style=
"display: none; float: left; position: fixed; bottom: 10px; margin-left: 50%; cursor: pointer;"
id=
"go"
onclick=
"pageScroll()"
>返回顶部</div></html>