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

在网页的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>