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脚本代码跑起来。
Jan 09 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
layui表格实现代码
May 20 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
简单了解Django模板的使用
2017/12/20 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
手写一个python迭代器过程详解
2019/08/27 Python
python标准库OS模块详解
2020/03/10 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
机械工程师岗位职责
2014/06/16 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
地道战观后感500字
2015/06/04 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书