Для начала нам необходимо подключить jQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Далее добавим javaScript для работы нашей кнопки "вверх/вниз":

<script>
    //положение страницы
    var BottomPosition = 0;
    //флаг для отображения кнопки "Назад"
    var BottomFlag = false; 
    //флаг для выполнения анимации
    var AnimateFlag = false;
		
    $(document).ready(function() {
        //клик по кнопке "Наверх/Назад"
        $('.inTop').click(function() { 
            //выполняется анимация
            AnimateFlag = true;
            if(BottomFlag) { //если нажата кнопка "Назад"
                //возврат в нужное место страницы со скоростью 200
                $("body,html").animate({"scrollTop":BottomPosition}, 200, function() {
                    AnimateFlag = false; // закончилось выполнение анимации
                });
            //заменяем кнопку	
            BottomFlag = false; 
            $('.inTop span').html('Наверх &uarr;');
            } else { //если нажата кнопка "наверх"
                //возврат в начало страницы со скоростью 200
                $("body,html").animate({"scrollTop":0}, 200, function() { 
                    AnimateFlag = false;
                });
                //запоминаем, до какой позиции была прокручена страница
                BottomPosition = $(window).scrollTop();  
                //показываем кнопку "Назад"
                BottomFlag = true;
                $('.inTop span').html('Назад &darr;');
            }
        });
         //осуществляем проверку при прокручивании страницы:
        $(window).scroll(function(event) {
            var countScroll = $(window).scrollTop();
            //если пользователь промотал более 200 пикселей
            if (countScroll > 200 && !AnimateFlag) { 
                //показываем кнопку "Наверх"
                $('.inTop').show(); 
                if(BottomFlag) {
                    BottomFlag = false;
                    $('.inTop span').html('Наверх &uarr;');
                }
            } else {
                if(!BottomFlag) {
                    //в других случаях прячем кнопку, если только это не кнопка "Назад"
                    $('.inTop').hide(); 
                }
            }
        });
    });
</script>

Добавим css стили для кнопки:

<style type="text/css">
    .inTop {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 20%;
        height: 100%;
        opacity: 0.5;
        filter: alpha(opacity=50);
        cursor: pointer;
        display: none;
    }

    .inTop:hover {
        background-color: #f5f4f4;
        opacity: 1;
        filter: alpha(opacity=100);
    }
		
    .inTop span {
        display: block;
        width: 100%;
        margin-top: 20px;
        text-align: center;
         font-size: 110%;
        color: #52466a;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
</style>

И наконец код самой кнопки "вверх/вниз":

<body>

    <div class="inTop">
        <span>Наверх &uarr;</span>
    </div>

    <!-- ... -->

</body>