javascript中返回顶部按钮的实现

炫酷的返回顶部功能

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>

以上所述就是本文的全部内容了，希望大家能够喜欢。