javascript中返回顶部按钮的实现


Posted in Javascript onMay 05, 2015

炫酷的返回顶部功能

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>

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

Javascript 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
js创建对象的方式总结
Jan 10 Javascript
浅谈Vue.js
Mar 02 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
JS简单实现动画弹出层效果
May 05 #Javascript
教你使用javascript简单写一个页面模板引擎
May 05 #Javascript
关于延迟加载JavaScript
May 05 #Javascript
Javascript闭包(Closure)详解
May 05 #Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 #Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 #Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 #Javascript
You might like
文章推荐系统(二)
2006/10/09 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
php依赖注入知识点详解
2019/09/23 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python实现的计数排序算法示例
2017/11/29 Python
有关Python的22个编程技巧
2018/08/29 Python
python中退出多层循环的方法
2018/11/27 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
华润集团网上药店:健一网
2016/09/19 全球购物
《燕子专列》教学反思
2014/02/21 职场文书
员工趣味活动方案
2014/08/27 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
北京导游词
2015/02/12 职场文书
大学生就业意向书
2015/05/11 职场文书
redis限流的实际应用
2021/04/24 Redis
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python