<script type="text/javascript"> $(document).ready(function() { //第一层业务,监听窗口卷动 //决断这个火箭是否可见。临界点就是卷动值为300 $(window).scroll(function(){ var A = $(window).scrollTop(); if(A > 300){ $(".backtotop").stop(true).fadeIn(); }else{ $(".backtotop").stop(true).fadeOut(); } }); //第二层业务,监听火箭的点击事件 $(".backtotop").click(function(){ $(this).css("background-image","url(images/rocket2.jpg)"); $("html,body").stop(true).animate({"scrollTop":0},1000,function(){ $(".backtotop").css("background-image","url(images/rocket1.jpg)"); }); }); }); </script>
卷动值大于300时,小火箭出现;
点击小火箭,变色(更换背景图);
回到顶部,小火箭变色并消失