在網上找到了數種實現方式，感覺第三種效果很好
執行個體一
DIV始終固定在網頁右下角位置的CSS實現方法，一個實用的提示效果，基於CSS-Div，開啟網頁後始終顯示在右下角，拖動捲軸仍然固定在右下角不會變，通過這個CSS代碼斷你會更深一層理解CSS的層定位方法，對以後編寫CSS協助很大。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>DIV始終固定在網頁右下角位置的CSS實現方法</title><br /><mce:style><!--<br />body {margin:0; padding:0 10px 0 10px;height:100%;overflow:auto;background:#333;font-size:12px;}<br />#wrap {display:block;bottom:0px;right:1px!important;right:18px;width:200px;line-height:30px;position:fixed;border:1px solid #fff;text-align:center;color:#fff; background:#000;}<br />*html{overflow-x:auto;overflow-y:auto;}<br />* html #wrap {position:absolute;}<br />--></mce:style><style mce_bogus="1">body {margin:0; padding:0 10px 0 10px;height:100%;overflow:auto;background:#333;font-size:12px;}<br />#wrap {display:block;bottom:0px;right:1px!important;right:18px;width:200px;line-height:30px;position:fixed;border:1px solid #fff;text-align:center;color:#fff; background:#000;}<br />*html{overflow-x:auto;overflow-y:auto;}<br />* html #wrap {position:absolute;}</style><br /></head><br /><body><br /><div><a href="#top" mce_href="#top">top</a></div><br /><div style="height:3986px;"></div><br /><div id="wrap">我是不會動的，只有這個地方是屬於我的，在你沒有更改我的位置之前。<br><br /><a href="#top" mce_href="#top">返回頂部</a><br /></div><br /><body><br /></body><br /></html><br />
轉自：http://www.csrcode.cn/html/txdm/tcys/1058.htm
執行個體二
調試相容： ie6 ie7 ie8 ff ，因為ie6不相容position:fixed; 這個屬性，在代碼中對這些做了HACK處理相容。
第一版是只要捲軸一滾動使內容卷進頂部，就顯示小按鈕於右下角，代碼和運行效果如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>無標題文檔</title><br /></head><br /><mce:style type="text/css"><!--<br />body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto}<br />#box{ float:left; width:1000px; background-color:#CCC;}<br />#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)));}<br />--></mce:style><style type="text/css" mce_bogus="1">body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto}<br />#box{ float:left; width:1000px; background-color:#CCC;}<br />#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><br /><mce:script type="text/javascript"><!--<br />function goTopEx(){<br />var obj=document.getElementById("goTopBtn");<br />function getScrollTop(){<br />return document.documentElement.scrollTop;<br />}<br />function setScrollTop(value){<br />document.documentElement.scrollTop=value;<br />}<br />window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}<br />obj.onclick=function(){<br />var goTop=setInterval(scrollMove,10);<br />function scrollMove(){<br />setScrollTop(getScrollTop()/1.1);<br />if(getScrollTop()<1)clearInterval(goTop);<br />}<br />}<br />}<br />// --></mce:script><br /><body><br /><div id="box"><br /><div style="float:left; margin-left:900px; display:inline; width:100px; height:500px; background-color:#990"></div><br /> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#C63"></div><br /> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#F93"></div><br /> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#09C"></div><br /> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#66C"></div><br /></div><br /><div id="goTopBtn" style="display:none;" mce_style="display:none;">回到頂部</div><br /><mce:script type="text/javascript"><!--<br />goTopEx();<br />// --></mce:script><br /></body><br /></html></p><p>
執行個體三
當使用者滾動螢幕期間“回到頂部”的小按鈕仍然不顯示，只有當螢幕滾動停止後小按鈕才悄悄溜出來。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>無標題文檔</title><br /></head><br /><mce:style type="text/css"><!--<br />body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto}<br />#box{ float:left; width:1000px; background-color:#CCC;}<br />#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)));}<br />--></mce:style><style type="text/css" mce_bogus="1">body{ margin:0px; padding:0px; width:1000px; margin-left:auto; margin-right:auto}<br />#box{ float:left; width:1000px; background-color:#CCC;}<br />#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><br /><mce:script type="text/javascript"><!--<br />function goTopEx(){<br />var obj=document.getElementById("goTopBtn");<br />function getScrollTop(){<br />return document.documentElement.scrollTop;<br />}<br />function setScrollTop(value){<br />document.documentElement.scrollTop=value;<br />}<br />window.onscroll=function(){<br />var sT1=getScrollTop();<br />var i=0;<br />var checkStop=setInterval(showGoTop,500);<br />obj.style.display="none";<br />function showGoTop(){<br />if(getScrollTop()==sT1&&i>1){<br />clearInterval(checkStop);<br />getScrollTop()>0?obj.style.display="":obj.style.display="none";<br />var mm=setInterval(ssBtn,20);<br />obj.style.bottom=0;<br />var s=0;<br />function ssBtn(){<br />if(s<21){s+=2;obj.style.bottom=s+"px";}else{clearInterval(mm)}<br />}<br />}<br />i++;<br />}<br />}<br />obj.onclick=function(){<br />var goTop=setInterval(scrollMove,10);<br />function scrollMove(){<br />setScrollTop(getScrollTop()/1.1);<br />if(getScrollTop()<1)clearInterval(goTop);<br />}<br />}<br />}<br />// --></mce:script><br /><body><br /><div id="box"><br /><div style="float:left; margin-left:900px; display:inline; width:100px; height:500px; background-color:#990"></div><br /> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#C63"></div><br /> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#F93"></div><br /> <div style="float:left;margin-left:900px; display:inline; width:100px; height:500px; background-color:#09C"></div><br /> <div style="float:left; margin-left:900px; display:inline;width:100px; height:500px; background-color:#66C"></div><br /></div><br /><div id="goTopBtn" style="display:none;" mce_style="display:none;">回到頂部</div><br /><mce:script type="text/javascript"><!--<br />goTopEx();<br />// --></mce:script><br /></body><br /></html></p><p>
執行個體二、三轉自：http://www.52-ni.cn/index.php/archives/835
滑動門特效：
http://www.csrcode.cn/html/txdm/tcys/2542.htm
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
