一个简单的弹性返回顶部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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
微信小程序实现列表左右滑动
Nov 19 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
一段实时更新的时间代码
2006/07/07 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
javascript中闭包closure的深入讲解
2021/03/03 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
前处理班长职位说明书
2014/03/01 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
单位推荐信范文
2015/03/27 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
Ruby处理YAML和json数据
2022/04/18 Ruby