一个简单的弹性返回顶部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的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
初识Node.js
Sep 03 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
浅析JS异步加载进度条
May 05 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
jQuery实现图片切换效果
Oct 19 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可逆加密/解密函数分享
2012/09/25 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP引用的调用方法分析
2016/04/25 PHP
php给数组赋值的实例方法
2019/09/26 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
电教室标语
2014/06/20 职场文书
学雷锋标语
2014/06/25 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
质量保证书
2015/01/17 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
三八节活动简报
2015/07/20 职场文书
公司员工管理制度
2015/08/04 职场文书
python 爬取华为应用市场评论
2021/05/29 Python