На последнем проекте http://goldnews.ru потребовалось сделать так, чтобы покупатель, просматривая список товаров (может быть 100 строк по 1 товару), имел возможность быстро вернутся к началу страницы - чтобы, например, выбрать другую категорию. Решили сделать не мгновенный переход (просто <a href="#top">), а плавную анимацию. Как это работает, можно увидеть в моём блоге - стрелка слева внизу. Будем использовать замечательный jQuery.
Сначала откроем файл со стилями нашего шаблона /templates/НАШ_ШАБЛОН/css/template.css
и добавим в самый конец стили:
#back-top {
position: fixed;
bottom: 30px;
margin-left: 12px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
Закрываем файл и сохраняем. В эту же папку кладем картинку стрелки 
(возьмите по ссылке).
Далее открываем index.php нашего шаблона и вначале, до <jdoc:include type="head" /> прописываем скрипты:
<!--Подключаем jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
// Устраняем конфликт между библиотеками jQuery и MooTools
var j = jQuery.noConflict();
j(document).ready(function(){
// Сначала скрываем стрелку
j("#back-top").hide();
// Анимируем саму стрелку
j(function () {
j(window).scroll(function () {
if (j(this).scrollTop() > 100) {
j('#back-top').fadeIn();
} else {
j('#back-top').fadeOut();
}
});
// Плавно скролим тело сайта по клику на нашу стрелку
j('#back-top a').click(function () {
j('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
Далее, если у нашего тэга body нет никакого id - прописываем <body id="top">, если же у нас у body уже есть какой- то id - не будем его трогать. Пропишем после body - <span id="top"></span>
и дальше рисуем саму кнопку:
<p id="back-top"> <a href="#top"><span></span>Вверх</a> </p>
Преобразуем файл в кодировку UTF-8 без ВОМ и сохраняем.
Проверяем работоспособность...
(C) По материалам http://webdesignerwall.com