javascript中返回顶部按钮的实现

编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了使用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>
<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>

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板