Кнопка "Вверх" занимает большую роль в дружелюбном интерфейсе сайта. Особенно это относится к страницам, в которых большое количество контента. Ознакомившись с нашим контентом, пользователь окажется внизу нашей страницы, где нет навигации по сайту (что плохо, в первую очередь, для нас и для пользователя). Осознав это, пользователь начинает путешествие вверх при помощи скроллинга мыши либо клавиш клавиатуры, чтобы увидеть навигационные ссылки, расположенные в верхней части страницы, для продолжения изучения сайта. Как настоящие веб-мастрера мы должны помочь нашему пользователю, сделав кнопку наверх, которая позволит в один клик поднятся пользователю к заглавию страницы.

Установка

Скачиваем плагин jQuery UItoTop, разархивируем и копируем файлы из папок css, img и js в соответствующие папки Вашего проекта.

Внедрение в шаблон

Сначала подключим css файл к шаблону. Между тэгами <head></head> вставляем:

<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />

Сам файл ui.totop.css имеет небольшое количество строк, т.ч. его можно скопировать и вставить в css файл, который Вы уже используете (к примеру style.css).

Следующим шагом нам нужно будет подключить js файлы плагина. В конец шаблона до тэга </body> подключаем библиотеку jQuery, easing, непосредственно сам плагин ui totop и его код вызова:

<!-- jquery --> 
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>

Проверьте пути css и js файлов, ведущие к ним и исправьте их при необходимости. Так же проверьте путь подключения изображения внутри css файла.

Если на Вашем сайте уже подлючена билиотека jQuery или easing не ниже этой, то не подлючайте их.

Если на Вашем саайт появилась черная кнопка со стрелкой вверх, то Вы все сделали правильно, иначе проверьте правильность путей.

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.