编程 Javascript

一个简单的弹性返回顶部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代码实现介绍

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 操作XML入门

Dec 25 Javascript

屏蔽Flash右键信息的js代码

Jan 17 Javascript

jQuery选择头像并实时显示的代码

Jun 27 Javascript

JS获取浏览器语言动态加载JS文件示例代码

Oct 31 Javascript

js中substring和substr两者区别和使用方法

Nov 09 Javascript

javascript实现任务栏消息提示的简单实例

May 31 Javascript

javascript入门之string对象【新手必看】

Nov 22 Javascript

详解百度百科目录导航树小插件

Jan 08 Javascript

ES6中Generator与异步操作实例分析

Mar 31 Javascript

详解用node编写自己的cli工具

May 23 Javascript

jquery实现倒计时小应用

Sep 19 jQuery

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