1. Для использования скрипта scrollup.js необходимо включить его в заголовок:

<script type="text/javascript" src="http://higgs.xevian.com/lib/goodies/scrollup.js"></script>

2. В шаблон включить код кнопки:

<div class="scrollUp button hidden"></div>

и/или панели

<div class="scrollUp pane visible docked"></div>

3. Добавить стили, например:

.scrollUp{
    position: fixed;
    bottom: 0;
    margin-bottom: 92px;
    right: 74px;
    width: 70px;
    height: 70px;
    background: #eeeeee url('images/scrollup_sign.png') no-repeat center center;
    background: rgba(238, 238, 238, 0.5) url('images/scrollup_sign.png') no-repeat center center;
    cursor: pointer;
}
.scrollUp.docked{
    background-image: url('images/scrolldown_sign.png');
}
.scrollUp.pane{
    position: fixed;
    left: 0;
    margin-bottom: 0;
}
.scrollUp.visible{
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.scrollUp.hidden{
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.scrollUp.permaVisible{
    opacity: 1 !important;
}

(В данном примере необходимо поместить изображения scrollup_sign.png и scrolldown_sign.png в папку images)

Классы visible и hidden определяют, виден элемент сразу после загрузки страницы или нет.

Классы docked и deployed автоматически меняются в зависимости от положения прокрутки: в начале страницы устанавливается класс docked. Это позволяет, к примеру, менять изображение стрелки на панели.

Скрипт поддерживает произвольное количество кнопок/панелей на одной странице.