一个简单的弹性返回顶部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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
如何用JS实现简单的数据监听
May 06 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扩展imagick
2014/06/02 PHP
php实现的RSS生成类实例
2015/04/23 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
python获取网页状态码示例
2014/03/30 Python
python WindowsError的错误代码详解
2017/07/23 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
pycharm创建一个python包方法图解
2019/04/10 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
房屋改造计划书
2014/01/10 职场文书
付款委托书范本
2014/04/04 职场文书
校园演讲稿汇总
2014/05/21 职场文书
预备党员转正意见
2015/06/01 职场文书
歌咏比赛主持词
2015/06/29 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python