首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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中返回顶部按钮的实现

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript常用的方法整理
Aug 20 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
Paypal支付不完全指北
Jun 04 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 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
数据类型(8) Bean(3) zip(1) enumerate(1) 自动化(1) IOC(3) 触发器(3) metaclass(1) Geospatial(1) XML(1)
You might like
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python jieba库分词模式实例用法
2021/01/13 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站：The Tot
2019/11/24 全球购物
竞聘演讲稿怎么写
2014/08/28 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
学生会主席任命书
2015/09/21 职场文书
2019公司管理制度
2019/04/19 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL