脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript中返回顶部按钮的实现

javascript中返回顶部按钮的实现

 更新时间：2015年05月05日 11:24:24   投稿：hebedich  
这篇文章主要介绍了使用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>

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

您可能感兴趣的文章:

相关文章

  • 使用canvas实现魔法摄像头的示例代码

    使用canvas实现魔法摄像头的示例代码

    我们用手机的摄像头自拍,很容易实现简单的自拍效果,如复古、黑白等等,其实我们使用web端的JavaScript也是可以实现的,接下来就带领小伙伴实现一个魔法摄像头,并且提供了截图下载功能,需要的朋友可以参考下
    2023-08-08
  • 教你如何写出可维护的JS代码

    教你如何写出可维护的JS代码

    在平时工作开发中，大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码，很多情况下都是以他人成果为基础的，或者新增修改需求，自己写的代码也会被其他开发人员调用，所以写好一份高质量可维护的代码就显得十分重要。
    2021-05-05
  • 微信小程序静默登录的实现代码

    微信小程序静默登录的实现代码

    这篇文章主要介绍了微信小程序静默登录的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • 微信小程序滚动、轮播图和文本实例详解

    微信小程序滚动、轮播图和文本实例详解

    轮播图是我们日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于微信小程序滚动、轮播图和文本的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • JS创建自定义对象的六种方法总结

    JS创建自定义对象的六种方法总结

    这篇文章主要给大家介绍了关于JS创建自定义对象的六种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • IE innerHTML,outerHTML所引起的问题

    IE innerHTML,outerHTML所引起的问题

    我们在用javascript创建一个遮盖层(div)后，如果点击关闭用到了
    2009-06-06
  • JS实现可针对算术表达式求值的计算器功能示例

    JS实现可针对算术表达式求值的计算器功能示例

    这篇文章主要介绍了JS实现可针对算术表达式求值的计算器功能,可实现基本的数字四则运算功能,涉及javascript基本数值运算与流程控制、判断等操作技巧,需要的朋友可以参考下
    2018-09-09
  • webpack中使用Eslint的实现

    webpack中使用Eslint的实现

    本文主要介绍了webpack中使用Eslint的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • javascript获取指定区间范围随机数的方法

    javascript获取指定区间范围随机数的方法

    下面小编就为大家带来一篇javascript获取指定区间范围随机数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • javascript中字体浮动效果的简单实例演示

    javascript中字体浮动效果的简单实例演示

    这篇文章主要介绍了javascript中字体浮动效果的简单实例演示,在一些网站上经常遇到当鼠标移导航栏的时候，能够使其弹出下拉选项，现在就演示一下这种功能，感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论