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

css实现最简单回到顶部浮动标签

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

1. 示例

    当页面向下拉动之后,我的博客的右边中下部会浮现一个∧的浮动图标,点击会回到顶部。这个做法非常简单,基于简单的css和js实现的

2. html代码

浮动的主体
<a href="#top" title="回到顶部" class="gotop_btn1" id="goTopButton1">∧</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,top = document.getElementById('goTopButton1');
	if(h>0)
	{
		top.style.display = 'block';
	}
	else
	{
		top.style.display = 'none';
	}
}

4. 感想

    本来找了很多资料,有用js的刷频的,有用jquery的,但是觉得还是这样简单,有效。简单简约依赖少,维护方便。

除非注明,文章均为灯火部落原创,转载请注明出处:css实现最简单回到顶部浮动标签-灯火部落
相关文章:
  • css实现最简单回到顶部浮动标签(兼容版)
  • 2014年博客开始正常运转
  • 多说留言的导入导出
  • 经验总结:PR值终于熬到3了
  • 博客更新缓慢
  • 经验总结:建一个网站,需要懂得很多(不断更新中...)
  • ∧回到顶部∧