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

赶紧来看看新浪微博是怎么实现的！
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

微博返回顶部按钮实现方法大剧透相关推荐

js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
jq实现页面滑动到一定位置显示返回顶部按钮，点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
在octopress中增加“返回顶部”按钮
为什么80%的码农都做不了架构师?>>> <div id="main"><article class="hentry" ...
小程序 WXS响应事件（超出两屏显示返回顶部按钮）
小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...
JavaScript实现返回顶部按钮
利用滚动事件(scroll)和点击事件(onclick)实现返回顶部按钮 1.当滚动的到某个位置出现返回顶部按钮 2.点击返回顶部按钮,立即跳到最顶部. 代码实现如下 <!DOCTYPE htm ...
html5 回到顶部按钮,“返回顶部”按钮效果
"返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...
2BizBox V3.2新版大剧透之十：中国财务
之前,v3.2新版剧透系列已经发布了九篇,涵盖了新版本的方方面面.但是,还有一个最重要的部分没有介绍,那就是中国财务.这也是大家最关心的部分.在本系列文章的终结篇,我们将详细.全面的介绍v3.2中发布 ...
js编写简易返回顶部按钮
之前ui设计让我做个返回顶部的按钮,我一定头绪都没,感觉真要加上这个功能,自己编写就得一个下午,工作量大为由,所以就推脱了; 当静下心,有时间捣鼓之后才发现原来so easy!!! 以下是我的js代码 ...
html设置返回首页,html页面添加返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:// 返回顶部$('a.top'). html:css:.box {wid ...
返回顶部按钮 js普通函数版/class构造函数版/JQ版
本文的返回顶部有两种版本:①js普通函数版: ②class构造函数版:③JQuery版话不多说直接上代码!(其中样式较简陋,引用时可以自己根据需要来修改样式) ①JS普通函数封装好的返回顶部版 ...

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

原理

如何实现呢？

微博返回顶部按钮实现方法大剧透相关推荐

最新文章

热门文章