首页
所有分类
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 相关文章推荐
JavaScript字符串对象split方法入门实例（用于把字符串分割成数组）
Oct 16 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
分块(1) 装饰器(1) decorator(1) 网页解析(1) bs4(1) translation(2) 读取(1) 二维数组(2) 查找算法(1) 循环(3)
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
图片按比例缩放函数
2006/06/26 Javascript
JavaScript高级程序设计 阅读笔记（十四） js继承机制的实现
2012/08/14 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Vue自定义指令详解
2017/07/28 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python最小二乘法矩阵
2019/01/02 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Python with语句和过程抽取思想
2019/12/23 Python
python数字类型math库原理解析
2020/03/02 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
python温度转换华氏温度实现代码
2020/12/06 Python
乔丹诺(Giordano)酒庄德国官网：找到最好的意大利葡萄酒
2017/12/28 全球购物
保护动物的宣传语
2015/07/13 职场文书
工伤调解协议书
2016/03/21 职场文书