jQuery返回顶部和底部的特效

使用方法：

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

插件初始化、配置

$(function(){
	$("#updown").css("top",window.screen.availHeight/2-100+"px");
	$(window).scroll(function() {		
		if($(window).scrollTop() >= 100){
			$('#updown').fadeIn(300); 
		}else{    
			$('#updown').fadeOut(300);    
		}  
	});
	$('#updown .up').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
	$('#updown .down').click(function(){$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);});
});

CSS样式

#updown{_top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));position: fixed;_position: absolute;top: 200px;right: 30px;display: none;}
#updown span{cursor:pointer;width:48px;height:50px;display:block;}
#updown .up{background:url(images/updown.png) no-repeat;}
#updown .up:hover{background:url(images/updown.png) top right no-repeat;}
#updown .down{background:url(images/updown.png) bottom left no-repeat;}
#updown .down:hover{background:url(images/updown.png) bottom right no-repeat;}

HTML结构

<div id="updown"><span class="up"></span><span class="down"></span></div>