微博返回顶部按钮实现方法大剧透

浏览网站的时候经常会看到漂浮工具条,咱们很多项目也有漂浮工具条。
但是做这个效果的时候你会发现,改变窗口大小之后你原本设置好,刚刚好可以停靠在内容边边的工具条就跑到内容里面去了
怎么解决呢?

赶紧来看看新浪微博是怎么实现的!
http://weibo.com

在这里插入图片描述

原理

其实原理跟做绝对定位元素水平居中的道理是一样的,使元素居中,然后在向旁边偏移
内页是水平居中的,决定定位的漂浮工具条也是水平居中的,然后向右偏移,使其刚刚好停靠在内容旁边

如何实现呢?

HTML

<a class="W_gotop" id="base_scrollToTop" href="javascript:void(0);" style="visibility: visible;">
   <em class="W_ficon ficon_backtop">Ú</em>
</a>

CSS部

.W_gotop { position: fixed;  _position: absolute;  bottom: 40px;  left: 50%;  margin-left:500px; display: block;  width: 40px;  height: 35px; padding-top: 5px; text-align: center; text-decoration: none;  cursor: pointer; opacity: 0.6;}
.W_gotop em { display: inline-block;  font-size: 20px; width: 26px; height: 30px; line-height: 30px;  line-height: 32px\9; overflow: hidden; color: #fff;}
.W_gotop:hover { opacity: 1;}
.W_gotop .W_ficon:hover {  color: #fff;}

position: fixed;使其相对窗口定位
_position: absolute; 兼容IE6
left: 50%; margin-left:500px; 是元素水平居中,为什么是500px? 因为内容的宽度是1000px

发布了147 篇原创文章 · 获赞 49 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/bigbear00007/article/details/104869370
今日推荐