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 >

附注背景图

转载于:https://www.cnblogs.com/loklook123/archive/2012/11/01/2749605.html