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 >
附注背景图