javascript中返回顶部按钮的实现

2024-05-06 16:19:21

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了使用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

<!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); //每次上升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

}

</script>

</head>

<body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<h1 style="text-align:center;">请往下滑</h1>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<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>