DIV始终固定在网页右下角位置的CSS实现方法，返回顶部功能

现在的位置: 首页 > 综合 > 正文

DIV始终固定在网页右下角位置的CSS实现方法，返回顶部功能

2013年09月20日 ⁄ 综合 ⁄ 共 8073字 ⁄ 字号小中大 ⁄ 评论关闭

在网上找到了数种实现方式，感觉第三种效果很好

实例一

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></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"></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"></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"></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"></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"></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"></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

【上篇】【Error】Call requires API level 3 (current min is 1)解决办法
【下篇】ftrace 简介

作者: burley

该日志由 burley 于11年前发表在综合分类下，最后更新于 2013年09月20日.
转载请注明: DIV始终固定在网页右下角位置的CSS实现方法，返回顶部功能 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

DIV始终固定在网页右下角位置的CSS实现方法，返回顶部功能

作者: burley

书签

最新文章New

本站推荐

返回首页