DIV始終固定在網頁右下角位置的CSS實現方法，返回頂部功能

阿新 • • 發佈：2019-02-13

在網上找到了數種實現方式，感覺第三種效果很好

例項一

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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIV始終固定在網頁右下角位置的CSS實現方法</title> <mce:style></mce:style><style mce_bogus="1">body {margin:0; padding:0 10px 0 10px;height:100%;overflow:auto;background:#333;font-size:12px;} #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;} *html{overflow-x:auto;overflow-y:auto;} * html #wrap {position:absolute;}</style> </head> <body> <div><a href="#top" mce_href="#top">top</a></div> <div style="height:3986px;"></div> <div id="wrap">我是不會動的，只有這個地方是屬於我的，在你沒有更改我的位置之前。<br> <a href="#top" mce_href="#top">返回頂部</a> </div> <body> </body> </html>

例項二

除錯相容： 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"> <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"></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"></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"></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"></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"></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"></mce:script> </body> </html>

滑動門特效：

DIV始終固定在網頁右下角位置的CSS實現方法，返回頂部功能

DIV始終固定在網頁右下角位置的CSS實現方法，返回頂部功能

CSS設定元件固定在頂部和固定在右下角

固定在網頁右下角的js廣告程式碼

jQuery實現網頁右下角懸浮層提示

經典面試題——從矩陣的左上角到右下角有多少種方法。

Win7檔案右下角盾牌標誌去除方法---UAC阻止程式執行

java實現桌面右下角彈窗（模仿，類似於qq訊息彈窗）

Web右下角彈出框提示，可疊加

右下角小火箭，返回頂部-onscroll，scrollTo

網頁設計中利用CSS實現背景圖片平鋪的技巧

html引入css的方法，以及css選擇器

css實現開關，js處理對應事件

css實現圓，半圓，四分之一圓和其他幾何圖形畫法

Android 電子簽名，手寫簽名案列實現方法，並上傳網頁顯示（base64）！

window.print()列印網頁中指定內容的實現方法

jquery+css實現自定義對話方塊功能（不使用外掛）

用js+css實現幀動畫播放的功能

UIScrollView的滾動條位置具體設定方法，超簡單

CSS固定定位實現右下角可關閉廣告

如何將div固定到外層大div的右下角

DIV始終固定在網頁右下角位置的CSS實現方法，返回頂部功能

相關推薦