在木蚂蚁页面的右下角有个小火箭，点击可以回到页面顶部，而且还有火箭的动态的效果。于是将木蚂蚁的页面另存为下来，将页面中的其他元素删除掉，精简了一下返回顶部的特效
JS部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- 返回顶部 --> <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部分
|
1 2 3 |
/* --- 返回顶部 --- */ .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;} |
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持以下吧
