<!--кнопочки вверх вниз-->
<style>
.go-up,.go-down {
padding:0;
margin:0px;
display:block;

outline: none 0 transparent;
border:none 0 transparent;
border-radius:10px;
cursor:pointer;
text-align:center; /*выравнивание*/
opacity: .7; /*прозрачность*/
width:66px; /*ширина кнопки*/
height:74px; /*высота кнопки*/
}
/*при наведении курсора*/
.go-down:hover,.go-up:hover {
opacity:1;
}
#wrp-butt{
overflow:hidden;
position:fixed; /*позиционируем*/
z-index:9999; /*показываем поверх все элементов на странице*/
right:25px; /*указываем положение, если слева - left*/
bottom:110px; /*положение от низа окна браузера*/
background-color:#fff;
border-radius:10px;
padding-right:5px!important;
}
</style>
<div id=wrp-butt>
<button class="go-up" id='ToTop'><img src="http://sa.uploads.ru/CeznN.png" alt="вверх" 
          style="vertical-align: middle"></button>
<button class="go-down" id='OnBottom'><img src="http://sa.uploads.ru/IG1xt.png" alt="вниз" 
          style="vertical-align: middle"></button>
</div>
<script type="text/javascript">
$(function(){
$("#ToTop").mousedown(function(){$("html").animate({scrollTop:0},{ "duration": 1000, "easing":"linear" });$(this).css({'margin':'1px -1px -1px 1px'})});
$("#OnBottom").mousedown(function(){$("html").animate({scrollTop:$(document).height()},{ "duration": 1000, "easing":"linear" });$(this).css({'margin':'1px -1px -1px 1px'})});
$("#ToTop,#OnBottom").mouseup(function(){$("html").stop(true);$(this).css({'margin':'0'});});
$("#ToTop,#OnBottom").mouseenter(function(){this.focus();}).mouseleave(function(){this.blur();})
});
</script>