QQ悬浮返回顶部

1、样式及HTML代码如下:

<style type="text/css">
#toTop{background-image:url(Images/qqbg.png);}
#toTop{width:54px;height:54px;display:block;position:fixed;right:25px;bottom:45px;background-position:-700px -110px;opacity:0.3;filter:alpha(opacity=30);z-index:100000001px;}
#toTop:hover{opacity:1;filter:alpha(opacity=100);}

</style>
<a href="#" target="_self" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false" style="display:none;"></a>

2、js 代码:

<script type="text/javascript">

/*-------------定义返回顶部方法,并绑定到Window的scroll事件上----------------------------------*/
function toggleToTop()
{document.documentElement.scrollTop+document.body.scrollTop>400?document.getElementById("toTop").style.display="block":document.getElementById("toTop").style.display="none"}
$(window).bind("scroll",function(){toggleToTop()})

</script >

附注背景图

posted @ 2012-11-01 14:19  loklook123  阅读(239)  评论(0编辑  收藏  举报