分类分类
2015-05-05 15:15作者：zhao
炫酷的返回顶部功能
js核心代码
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); //每次上升10px
if(document.body.scrollTop==0) {
document.getElementById('flypig').style.marginBottom=ptt+'px';
ptt=ptt+10;
}
scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次
if(ptt>=1000){
ptt=0;
document.getElementById('flypig').style.marginBottom=20+'px';
document.getElementById('flypig').style.display='none';
clearTimeout(scrolldelay);
}
//pageScroll ends
}
html
<!DOCTYPEhtml>
<html>
<head>
<title>返回顶部按钮的实现</title>
<metacharset="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(){
vart=document.documentElement.scrollTop||document.body.scrollTop;
vartop_div=document.getElementById("go");
if(t>=300){
top_div.style.display="block";
}else{
top_div.style.display="none";
}
}
varptt=20;
functionpageScroll(){
document.getElementById('flypig').style.display='block';
window.scrollBy(0,-10);//每次上升10px
if(document.body.scrollTop==0){
document.getElementById('flypig').style.marginBottom=ptt+'px';
ptt=ptt+10;
}
scrolldelay=setTimeout('pageScroll()',2);//2毫秒重复执行一次
if(ptt>=1000){
ptt=0;
document.getElementById('flypig').style.marginBottom=20+'px';
document.getElementById('flypig').style.display='none';
clearTimeout(scrolldelay);
}
//pageScrollends
}
</script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h1style="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/><!--让你的页面足够的长-->
<divstyle="display:none;float:left;position:fixed;margin-left:50%;cursor:pointer;margin-bottom:20px;"id="flypig">
<imgsrc="/wp-content/themes/Jakesoft/images/flypig.gif"></div>
<divstyle="display:none;float:left;position:fixed;bottom:10px;margin-left:50%;cursor:pointer;"id="go"onclick="pageScroll()">返回顶部</div>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关