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