Кнопка "наверх" с плавной прокруткой контента. jQuery плагин Uitotop
Всем привет. В этой статье хочу поделиться с Вами простым, но очень нужным плагином для сайта: плавной прокруткой контента наверх с помощью скрипта jQuery Uitotop. Данный плагин состоит из одной кнопки, появляющейся при скролле вниз страницы, который при нажатии плавно возвращает пользователя наверх страницы.
Такая кнопка очень хорошо подходит «длинным» страницам, типа какой-нибудь статьи. Когда посетитель закончил читать статью или просматривать контент, он чисто интуитивно (хоть и меню навигации может быть на виду) хотел бы вернуться наверх сайта, так как там сосредоточены все элементы навигации по сайту. Кстати, это интересный факт, но мало кто знает, что на любом сайте больше всего посетители нажимают на логотип, так как интуитивно знают, что клик по логотипу приведет их на главную страницу.
Подключение кнопки «наверх» к сайту
Подключается этот плагин легко и просто.
Шаг 1. Скачайте плагин и разархивируйте его в корень вашего сайта. У вас будут папки css, js и img (хотя скорее всего эти папки у вас уже есть). Файл index.html можно не заливать на сервер.
Шаг 2. Подключите css файл ui.totop.css. Это делается вставкой следующего кода в блок <head>
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
Шаг 3. Подключите скрипты плагина. Вставьте следующий код в самый низ страницы перед закрытием </body>:
<!-- 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() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
Плагин кнопки «наверх» с плавной прокруткой контента подключен. Вы можете изменить дизайн кнопки, изменив изображение ui.totop.png в папке img. Смотрите «демо», качайте плагин, ставьте на свой сайт. Всего хорошего!
P.S. Для демонстрации скрипта я выложил в демо свою статью про Питер, заодно можете почитать, кому интересно :)
Комментарии ()