网页底部“回到顶部”功能代码

在网页的body最后加上代码：

<div id="control_pannel"><a onclick="window.scrollTo(0,0);" href="javascript:void(0);">回到顶部</a></div>

然后用CSS控制，CSS代码：

#control_pannel{background:#FFF none repeat scroll 0 0;border:2px solid #EFEFEF;bottom:2px;padding:1px;position:fixed;_position:absolute;right:272px;width:80px; font-size:12px;}#control_pannel a{display:block;color:#555;padding:2px 4px 2px 4px;text-align:center;opacity:.20;filter:alpha(Opacity=20); text-decoration:none;}#control_pannel a:hover{background:#AAA;color:#FFF;text-decoration:none;opacity:1;filter:alpha(Opacity=100);}
 
效果如图：


第二种：当下滑时才出现那个按钮。
<a href="javascript:void(0);" onclick="window.scrollTo(0,0);" class="gotop_btn" 
id="goTopButton" style="display: none; ">&nbsp;</a>
<script type="text/javascript">
(function($){
$(window).scroll(function(event){
if($(this).scrollTop() > 0){
if($.browser.ie6){
$('#goTopButton').css('top', $(this).scrollTop() + 
 
$(this).height() - 170);
}
if($('#goTopButton').css('display') == 'none'){
$('#goTopButton').fadeIn();
}
}else{
$('#goTopButton').fadeOut();
}
});
})(jQuery);
</script>