jquery星空火箭置顶,返回页面顶部,有动画效果
使用方法
1、head引入css文件
<style type="text/css"> body{background:url(images/blog7year_videobg.png);} /* actGotop */ .actGotop{position:fixed;top:0;margin:480px 0 0 0;right:50px;width:150px;height:195px;display:none;} *html .actGotop{position:absolute;top:expression(eval(document.documentElement.scrollTop));} .actGotop a,.actGotop a:link{width:150px;height:195px;display:inline-block;background:url(images/blog7year_gotop.png) no-repeat;_background:url(images/blog7year_gotop.gif) no-repeat;outline:none;} .actGotop a:hover{width:150px;height:195px;background:url(images/blog7year_gotopd.gif) no-repeat;outline:none;} </style>2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>3、body引入部分
<div class="actGotop"><a href="javascript:;" title="Top"></a></div> <script type="text/javascript"> $(function(){ $(window).scroll(function() { if($(window).scrollTop() >= 100){ $('.actGotop').fadeIn(300); }else{ $('.actGotop').fadeOut(300); } }); $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); }); </script>