一个简单的弹性返回顶部JS代码实现介绍


Posted in Javascript onJune 09, 2013

昨天做了一个这样的功能,贴出来参考。
HTML/JS/CSS代码:

<!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=gb2312" /> 
<title>弹性返回顶部JS代码</title> 
<script type="text/javascript"> 
function goTopEx() { 
var obj = document.getElementById("goTopBtn"); 
function getScrollTop() { 
return document.documentElement.scrollTop + document.body.scrollTop; 
} 
function setScrollTop(value) { 
if (document.documentElement.scrollTop) { 
document.documentElement.scrollTop = value; 
} else { 
document.body.scrollTop = value; 
} 
} 
window.onscroll = function() { 
getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none"; 
} 
obj.onclick = function() { 
var goTop = setInterval(scrollMove, 10); 
function scrollMove() { 
setScrollTop(getScrollTop() / 1.1); 
if (getScrollTop() < 1) clearInterval(goTop); 
} 
} 
} 
</script> 
<style> 
BODY { 
HEIGHT: 3600px; 
} 
#goTopBtn { 
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto 
} 
</style> 
</head> 
<body style="text-align:center"> 
<div style="display: none" id="goTopBtn"><img border=0 src="/${res}/img/go_to_top.png"></div> 
<script type=text/javascript>goTopEx();</script> 
<br /><br /><br /><br /><br /><br /><br /> 
<p></p> 
<p><p>超出首屏范围,即会出现TOP按钮,否则自动隐藏。<br /> 
 </p></p> 
<p></p> 
</body> 
</html>

效果图:
页面滚动条处于低端
1、
一个简单的弹性返回顶部JS代码实现介绍 
2、点击回到顶部,并且隐藏掉。
一个简单的弹性返回顶部JS代码实现介绍
Javascript 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
JavaScript中string对象
Jun 12 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 #Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 #Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 #Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 #Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 #Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 #Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 #Javascript
You might like
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
实用函数7
2007/11/08 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
使用python Django做网页
2013/11/04 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
银行会计业务的个人自我评价
2013/11/02 职场文书
智能电子应届生求职信
2013/11/10 职场文书
经典婚礼主持词
2014/03/13 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle