JS采用绝对定位实现回到顶部效果完整实例


Posted in Javascript onJune 20, 2016

本文实例讲述了JS采用绝对定位实现回到顶部效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位回到顶部按钮</title>
<style type="text/css">
body{margin:0px;padding:0px;height:2500px;background:#6f0024;}
#div1{width:120px;height:34px;right:4px;bottom:5px;cursor:pointer;background:url(images/ToTop.png) no-repeat;position:fixed;_position:absolute;display:none;}
</style>
<script type="text/javascript">
//绝对定位隐藏显示
function getScroll(id){
 var obj = document.getElementById(id);
 var timer = null;
 positionFixed(obj);
 if(obj){
 obj.style.display = 'none';
 window.onscroll=function(){
  getScrollTop() > 0 ? obj.style.display = "block" : obj.style.display = "none";
 }
 obj.onclick=function(){
  var timer = setInterval(sMove,10);
  function sMove(){
  setScrollTop(getScrollTop() / 1.5);
  if(getScrollTop() < 1)clearInterval(timer);
  }
 }
 }
}
//判断IE6
function positionFixed(obj){
 var iE6 = !-[1,] && !window.XMLHttpRequest;
 if(obj){
     var top = obj.offsetTop;
 if(iE6){
  document.documentElement.style.textOverflow = "ellipsis";
  obj.style.position = "absolute";
  obj.style.setExpression("top", "eval(documentElement.scrollTop + " + top + ') + "px"');
 }
 }
}
//获取滚动条Top
function getScrollTop(){
 return document.documentElement.scrollTop || document.body.scrollTop;
}
//回到顶部
function setScrollTop(value){
 document.documentElement.scrollTop = value;
 document.body.scrollTop = value;
}
window.onload = function(){
 getScroll('div1');
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
js实现旋转的星空效果
Nov 01 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 #Javascript
js 获取经纬度的实现方法
Jun 20 #Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 #Javascript
JS作为值的函数用法示例
Jun 20 #Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 #Javascript
JS事件添加和移出的兼容写法示例
Jun 20 #Javascript
Javascript操作表单实例讲解(下)
Jun 20 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
Yii实现简单分页的方法
2016/04/29 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP Include文件实例讲解
2019/02/15 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python 如何创建一个线程池
2020/07/28 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
python如何绘制疫情图
2020/09/16 Python
Viking比利时:购买办公用品
2019/10/30 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
房屋所有权证明
2014/10/20 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers