<div id="pageuserscroll">
   <ul>
      <li>
         <div class="page-top" title="Наверх" style="display: block;">top</div>
      </li>
      <li>
         <div class="page-up" title="Предыдущий экран" style="display: block;">up</div>
      </li>
      <li>
         <div class="page-down" title="Следующий экран" style="display: block;">down</div>
      </li>
      <li>
         <div class="page-bottom" title="Вниз" style="display: block;">bottom</div>
      </li>
   </ul>
</div>

#pageuserscroll {
     bottom: 36px;
     height: 154px;
     overflow: hidden;
     position: fixed;
     right: 0;
     width: 41px;
     z-index: 200;
}
#pageuserscroll ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
}
#pageuserscroll ul li {
     display: block;
     height: 36px;
     margin-bottom: 3px;
     width: 41px;
}
#pageuserscroll .page-top {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-top.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll .page-up {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-up.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll .page-down {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-down.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll .page-bottom {
     background: rgba(0,0,0,0) url(/templates/biz-ideas/images/nav-bottom.png) no-repeat scroll 0 0;
     display: none;
}
#pageuserscroll ul li div {
     color: #666;
     cursor: pointer;
     display: block;
     height: 36px;
     overflow: hidden;
     text-align: center;
     text-indent: -9000px;
     width: 41px;
}

<script type="text/javascript">
$(document).ready(function() {
    $('<div id="pageuserscroll"><ul><li><div class="page-top" title="Наверх">top</div></li><li><div class="page-up" title="Предыдущий экран">up</div></li><li><div class="page-down" title="Следующий экран">down</div></li><li><div class="page-bottom" title="Вниз">bottom</div></li></ul></div>').appendTo($('body'));
    if ($(window).scrollTop() < 200) {
        $('#pageuserscroll .page-bottom, #pageuserscroll .page-down').fadeIn();
    } else {
        $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeIn();
    }
    $('#pageuserscroll li div').click(function() {
        var currentScroll = $(document).scrollTop();
        if ($(this).hasClass('page-top')) {
            $('html, body').animate({
                scrollTop: $("body").offset().top
            }, 400);
        }
        if ($(this).hasClass('page-bottom')) {
            $('html, body').animate({
                scrollTop: $(window).scrollTop() + $(document).height()
            }, 400);
        }
        if ($(this).hasClass('page-up')) {
            $('html, body').animate({
                scrollTop: currentScroll - $(window).height()
            }, 400);
        }
        if ($(this).hasClass('page-down')) {
            $('html, body').animate({
                scrollTop: currentScroll + $(window).height()
            }, 400);
        }
    });
    $(window).scroll(function() {
        if ($(this).scrollTop() >= $(window).height() / 2) {
            $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeIn();
        } else {
            $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeOut();
        }
        if ($(this).scrollTop() >= $(document).height() - $(window).height()) {
            $('#pageuserscroll .page-up, #pageuserscroll .page-top').fadeIn();
            $('#pageuserscroll .page-bottom, #pageuserscroll .page-down').fadeOut();
        } else if ($(this).scrollTop() >= $(document).scrollTop() - ($(window).height() / 2)) {
            $('#pageuserscroll .page-bottom, #pageuserscroll .page-down').fadeIn();
        }
    });
});
</script>