您现在的位置: 首页 » 未分类 » 快速制作“返回顶部”悬浮按钮样式代码

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

作者: acboy 分类: 未分类 发布时间: 2012-10-12 18:29

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

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

                <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>最近的地方。

演示效果可参考:http://www.yaohejie.com的右下方。

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

_position:absolute;

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

.

公众号:yohojie 客服QQ:1142642277

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

上一篇:

下一篇:

由于本站持续受到垃圾评论骚扰,目前评论功能已经关闭