第一版是只要滚动条一滚动使内容卷进顶部,就显示小按钮于右下角,代码和运行效果如下 <!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=utf-8" /> <title>无标题文档</title> </head> <mce:style type="text/css"><!-- body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto} #box{ float:left; width:1000px; background-color:#CCC;} #goTopBtn{ position:fixed; right:20px; bottom:20px; width:100px; height:30px; line-height:30px; cursor:pointer; color:#FFF; background-color:#F63; text-align:center; font-size:12px;_position:absolute;_right:auto;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,20)||0));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,20)||0)));} --></mce:style><style type="text/css" mce_bogus="1">body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto} #box{ float:left; width:1000px; background-color:#CCC;} #goTopBtn{ position:fixed; right:20px; bottom:20px; width:100px; height:30px; line-height:30px; cursor:pointer; color:#FFF; background-color:#F63; text-align:center; font-size:12px;_position:absolute;_right:auto;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,20)||0));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,20)||0)));}</style> <mce:script type="text/javascript"><!-- function goTopEx(){ var obj=document.getElementById("goTopBtn"); function getScrollTop(){ return document.documentElement.scrollTop; } function setScrollTop(value){ document.documentElement.scrollTop=value; } window.οnscrοll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";} obj.οnclick=function(){ var goTop=setInterval(scrollMove,10); function scrollMove(){ setScrollTop(getScrollTop()/1.1); if(getScrollTop()<1)clearInterval(goTop); } } } // --></mce:script> <body> <div id="box"> <div style="float:left; margin-left:900px; display:inline; width:100px; height:500px; background-color:#990"></div> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#C63"></div> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#F93"></div> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#09C"></div> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#66C"></div> </div> <div id="goTopBtn" style="display:none;" mce_style="display:none;">回到顶部</div> <mce:script type="text/javascript"><!-- goTopEx(); // --></mce:script> </body> </html> 下面这个版本的代码是当用户滚动屏幕期间“回到顶部”的小按钮仍然不显示,只有当屏幕滚动停止后小按钮才悄悄溜出来。 <!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=utf-8" /> <title>无标题文档</title> </head> <mce:style type="text/css"><!-- body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto} #box{ float:left; width:1000px; background-color:#CCC;} #goTopBtn{ position:fixed; right:20px; bottom:20px; width:100px; height:30px; line-height:30px; cursor:pointer; color:#FFF; background-color:#F63; text-align:center; font-size:12px;_position:absolute;_right:auto;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,20)||0));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,20)||0)));} --></mce:style><style type="text/css" mce_bogus="1">body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto} #box{ float:left; width:1000px; background-color:#CCC;} #goTopBtn{ position:fixed; right:20px; bottom:20px; width:100px; height:30px; line-height:30px; cursor:pointer; color:#FFF; background-color:#F63; text-align:center; font-size:12px;_position:absolute;_right:auto;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,20)||0));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,20)||0)));}</style> <mce:script type="text/javascript"><!-- function goTopEx(){ var obj=document.getElementById("goTopBtn"); function getScrollTop(){ return document.documentElement.scrollTop; } function setScrollTop(value){ document.documentElement.scrollTop=value; } window.οnscrοll=function(){ var sT1=getScrollTop(); var i=0; var checkStop=setInterval(showGoTop,500); obj.style.display="none"; function showGoTop(){ if(getScrollTop()==sT1&&i>1){ clearInterval(checkStop); getScrollTop()>0?obj.style.display="":obj.style.display="none"; var mm=setInterval(ssBtn,20); obj.style.bottom=0; var s=0; function ssBtn(){ if(s<21){s+=2;obj.style.bottom=s+"px";}else{clearInterval(mm)} } } i++; } } obj.οnclick=function(){ var goTop=setInterval(scrollMove,10); function scrollMove(){ setScrollTop(getScrollTop()/1.1); if(getScrollTop()<1)clearInterval(goTop); } } } // --></mce:script> <body> <div id="box"> <div style="float:left; margin-left:900px; display:inline; width:100px; height:500px; background-color:#990"></div> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#C63"></div> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#F93"></div> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#09C"></div> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#66C"></div> </div> <div id="goTopBtn" style="display:none;" mce_style="display:none;">回到顶部</div> <mce:script type="text/javascript"><!-- goTopEx(); // --></mce:script> </body> </html>