当前分类:记录>>正文

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

来源:互联网   更新时间:2022年6月15日  

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

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

<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,使这个悬浮按钮跟着移动没花时间研究过,有研究过的朋友,不妨分享一下。

本文固定链接:https://6yhj.com/leku-p-5.html  版权所有,转载请保留本地址!
[猜你喜欢]

标签: