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>