0

小火箭样式返回顶部

在木蚂蚁页面的右下角有个小火箭,点击可以回到页面顶部,而且还有火箭的动态的效果。于是将木蚂蚁的页面另存为下来,将页面中的其他元素删除掉,精简了一下返回顶部的特效

JS部分

<!-- 返回顶部 -->
    <div class="actGotop"><a href="javascript:;" title="返回顶部"></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>
    <!-- 代码 结束 -->

CSS部分

/* --- 返回顶部 --- */
.actGotop{position:fixed; bottom:50px; right:30px; width:32px; height:64px; display:none;z-index:999;}
.actGotop a,.actGotop a:link{width:32px;height:64px;display:inline-block; background:url(../images/gotop.png) no-repeat;z-index:999;}

 

   
微信 支付宝    

如果文章对您有帮助,欢迎打赏作者!

欢迎评论