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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
javascript实现列表切换效果
May 02 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
JavaScript多种页面刷新方法小结
Apr 04 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
php实现统计邮件大小的方法
2013/08/06 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP中的Memcache详解
2014/04/05 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
google地图的路线实现代码
2009/08/20 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python下rrdtool模块的基本使用方法
2015/11/13 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
HTML5进度条特效
2014/12/18 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
文案策划专业自荐信
2014/07/07 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
观后感的写法
2015/06/19 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript