1、此博文图片样式引用腾讯网站,效果如下:
2、样式设置:
1 #toTop { 2 /*选中的背景图片的大小*/ 3 54px; 4 height: 54px; 5 display: none;/*刚开始不显示*/ 6 position: fixed; 7 right: 25px;/*距离右边大小值*/ 8 bottom: 45px;/*距离底部大小值*/ 9 /*选定图片区域*/ 10 background-image: url(images/qqbg_1.5.5.png); 11 background-repeat: no-repeat; 12 background-position: -700px -110px; 13 opacity: 0.3; /*透明度*/ 14 } 15 16 #toTop:hover { 17 opacity: 1;/*悬停时不透明*/ 18 filter: alpha(opacity = 100); 19 }
3、JS代码:
1 <a href="#" target="_self" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false"></a> 2 <script type = "text/javascript"> 3 function toTopHide(){ 4 $(document).scrollTop()>400? 5 $("#toTop").show() 6 :$("#toTop").hide(); 7 } 8 $(window).scroll(function(){toTopHide()}); 9 </script>