类别导航:
通知:目前网站正常哦!
你的位置:首页 >> 编程技术 >> css实现最简单回到顶部浮动标签(兼容版)

css实现最简单回到顶部浮动标签(兼容版)

发表日期:2014-02-25 作者:DH分类:编程技术 标签: css
索引[隐藏]

1. 前言

上一篇文章中写道使用简单的css和js实现浮动回到顶部,遇到了两个问题:
    1. ∧ 比较土,用文字比较好
    2. firefox不兼容
所以这里重新修改一下,弄一个兼容的版本

2. html代码

浮动的主体
<a href="#top" title="回到顶部" class="gotop_btn" id="goTopButton">∧</br>回</br>到</br>顶</br>部</a>

3. css代码

用于设定浮动的位置
.gotop_btn1 {
position: fixed;
left: 50%;
margin-left: 458px;
top: 400px;
font-weight:700;
font-size:11px;
width: 22px;
height: 71px;
display: none;
}

4. js代码

用于设定在什么情况下浮动标签出现
window.onscroll = function()
{
	var h =document.body.scrollTop;
	if(!h)
		h=document.documentElement.scrollTop;
	var top = document.getElementById('goTopButton');
	if(h>0)
	{
		top.style.display = 'block';
	}
	else
	{
		top.style.display = 'none';
	}
};

4. 感想

    还是要多测试,多使用才能磨练出一个比较好的体验度。

除非注明,文章均为灯火部落原创,转载请注明出处:css实现最简单回到顶部浮动标签(兼容版)-灯火部落
相关文章:
  • 多说留言的导入导出
  • css实现最简单回到顶部浮动标签
  • 博客更新缓慢
  • 2014年博客开始正常运转
  • ∧回到顶部∧