<script type="text/javascript">
$(document).ready(function(){
  $("#back_top").hide();
  $(function () {
   $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
     $('#back_top').fadeIn(1);
     $('#back_bottom').fadeOut(1);
    } else {
     $('#back_top').fadeOut(1);
     $('#back_bottom').fadeIn(1);
    }
   });
   $('#back_top').click(function () {
    $('body,html').animate({
     scrollTop: 0
    }, 'slow');
    return false;
   });
   $('#back_bottom').click(function () {
    $('body,html').animate({
     scrollTop: $(document).height()
    }, 'slow');
    return false;
   });
  });
});
</script>

<script type="text/javascript">
$(window).scroll(function(){
var s = $(window).scrollTop();
var f = $(document).height()-$(window).height();
var d=s/f*100;
var p=Math.round(d);
$("#prc").text(p);
});
</script>

<div style="position:fixed; width: 50px; height: 100%; z-index: 6; right: 10px; top: 90%; background: transparent; ">
<center>
<a title="Вверх" id="back_top" href="javascript://"><img src="http://webo4ka.ru/Ucoz7/up_knopka_vverx.png" onmouseover="this.src='http://webo4ka.ru/Ucoz7/up1_knopka_vverx.png'" onmouseout="this.src='http://webo4ka.ru/Ucoz7/up_knopka_vverx.png'"></a>
<a title="Вниз" id="back_bottom" href="javascript://"><img src="" alt="Вниз" onmouseover="this.src='[адрес изображения кнопки «Вниз» при наведении]'" onmouseout="this.src='[адрес изображения кнопки «Вниз»]'"></a>
<font color="#000000" size="3"><span id="prc">0</span>%</font></center>
</div>