js返回顶部代码

来源：经典论坛时间：2011-04-25 19:21:00　

刚开始进入页面，当滚动向下超过原屏的时候。右侧会出现一个“返回顶部”的按钮。这个按钮会跟这网页一起向上向下，当滚动到顶部的时候。“返回顶部”按钮消失

请问大侠们怎么实现这样的效果。谢谢啊

<!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" /><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="pragma" content="no-cache" /><meta http-equiv="cache-control" content="no-cache,must-revalidate" /><meta http-equiv="expires" content="0" /><meta name="author" content="深蓝蝴蝶" /><meta name="generator" content="editplus" /><title>浮动div绑定 - asp之家 www.aspxhome.com</title><style type="text/css">*{margin:0;padding:0;}.floater{position:absolute;top:250px;right:100px;height:30px;z-index:10;}</style></head><body><a name="p0"></a> <div class="floater" id="floater1"> <a href="#p0"><img border="0" src="https://img.aspxhome.com/file/UploadPic/20114/25/smile-33.gif" alt="1" /></a></div><div class="floater" id="floater2"> <a href="#p0"><img border="0" src="https://img.aspxhome.com/file/UploadPic/20114/25/smile-33.gif" alt="2" /></a></div><div style="position:absolute;top:250px;height:30px;z-index:10;right:100px" id="floater3"> <a href="#p0"><img border="0" src="https://img.aspxhome.com/file/UploadPic/20114/25/smile-33.gif" alt="3" /></a></div></body><script type="text/javascript">var bluebutterfly=function(){}bluebutterfly.Floater=function(option){this.divobj=document.getElementById(option.divid);//控件IDthis.lrsize=option.lrsize||0;//控件右间距this.direction=option.direction||"right";//控件方向this.speed=option.speed||10;//飘动速度，最小为1毫秒this.step=option.step||0.1;//飘动步长，最小为0.1倍//====系统变量=====this.lastScrollX=this.lastScrollY=0;this.flyObj=null};//飘动bluebutterfly.Floater.prototype.fly=function(){var self=this;if(self.divobj){if(self.speed<1){self.speed=1;}if(self.direction=="right"){self.divobj.style.right=self.lrsize;}else{self.divobj.style.left=self.lrsize;}self.flyObj=window.setInterval(function(){self.flying();},self.speed);}};//飘动中bluebutterfly.Floater.prototype.flying=function(){var self=this,percent=diffY=diffX=0;diffY=document.documentElement.scrollTop;diffX=document.documentElement.scrollLeft;if(diffY!=self.lastScrollY){percent=self.step*(diffY-self.lastScrollY);if(percent>0){percent = Math.ceil(percent);}else{percent = Math.floor(percent);}self.divobj.style.top=(parseInt(bluebutterfly.getStyle(self.divobj,"top"))+percent)+"px";self.lastScrollY=self.lastScrollY+percent;}if(diffX!=self.lastScrollX){percent=self.step*(diffX-self.lastScrollX);if(percent>0){percent=Math.ceil(percent);}else{percent=Math.floor(percent);}self.divobj.style.left=(parseInt(bluebutterfly.getStyle(self.divobj,"left"))+percent)+"px";self.lastScrollX=self.lastScrollX+percent;}};//停止飘动bluebutterfly.Floater.prototype.stop=function(){if(this.flyObj){window.clearInterval(this.flyObj);this.flyObj=null;}};bluebutterfly.getStyle=function(target,stylename){var curVal="";if(typeof(target)!="object"){target=bluebutterfly.getElementById(target);}if (target.currentStyle){ curVal=target.currentStyle[stylename]}else{ curVal=document.defaultView.getComputedStyle(target, null)[stylename];}return curVal;};var t1=new bluebutterfly.Floater({"divid":"floater1","lrsize":"98px","direction":"right","speed":"10","step":"0.1"});t1.fly();var t2=new bluebutterfly.Floater({"divid":"floater2","lrsize":"2px","direction":"right","speed":"10","step":"0.5"});t2.fly();var t3=new bluebutterfly.Floater({"divid":"floater3","lrsize":"2px","direction":"left","speed":"10","step":"0.5"});t3.fly();t3.stop();</script></html>

标签：js,顶部

投稿

js返回顶部代码

猜你喜欢

JavaScript 获取客户端计算机硬件及系统信息

PHP和JS之间的数据交互并处理

MySQL数据库安全解决方案

有关Oracle数据库的备份情况

几个SQL SERVER应用问题解答

div水平垂直居中方法(淘宝招聘css题目)

网站注册那些事儿

给JavaScript自定义一个Trim函数

MYSQL server has gone away解决办法

前端优化，让你的网页显示的更快更流畅

asp如何验证字符串是否包含有效字符？

用 Schema 约束 XML 数据

语义化的label？

排版自适应提升可访问性

Flash的Fallback Content等

MSSQL优化之探索MSSQL执行计划（转）

给网站界面预留退路

"模板化"——限制还是激发

企业网站该怎么做？

23个MySQL数据库安全使用技巧