一个简单的弹性返回顶部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的给文章加入关键字链接
Oct 26 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
jQuery之过滤元素操作小结
2013/11/30 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
如何基于python实现不邻接植花
2020/05/01 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
好邻里事迹材料
2014/01/16 职场文书
幼儿园小班评语
2014/04/18 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python