快速制作“返回顶部”悬浮按钮样式代码

对于页面内容超过一屏的网站，这样一个“返回顶部”的悬浮按钮都是必不可少的，主要是方便用户浏览，提高网站访问体验。

如何快速简单制作一个这样的按钮呢，这里把自己常用的样式代码贴出来。

<div class=”backtop”>

<a title=”返回页面顶部” onclick=”window.scrollTo(0,0);” href=”javascript:void(0);”>▲返回顶部</a>

</div>

对应的CSS样式如下:

.backtop{position:fixed;_position:absolute;height:85px;width:14px;left:85%;top:80%;margin:0px -40px 0px 0px;font-size:14px;background:#9c6;color:#fff;text-align:cnter;padding:0px 3px;}
.backtop a{text-decoration:none;color:#000;}

在ie7、ie8、谷歌、火狐下都可以达到效果，悬浮按钮会随着用户上下翻动滚动条移动，点击按钮后，可快速回到该网页第一屏。

代码直接复即可用，因为这个样式使用的全局定位，所以最好将这个层放在离</body>最近的地方。

演示效果可参考本博客右下方！

注意：在ie6里面，那个悬浮按钮是不会随意滚动条移动的，必须加上下面这句以防止引起错位：

_position:absolute;

这个样式是自己写的，如何去兼容ie6，使这个悬浮按钮跟着移动没花时间研究过，有研究过的朋友，不妨分享一下。