jQuery : Кнопка быстрого перехода вверх - TOP
В представленном архиве находится 3 папки: css - файл стилей кнопки, img - изображение и папка js в которой находятся 4 JavaScript файла
В представленном архиве находится 3 папки: css - файл стилей кнопки, img - изображение и папка js в которой находятся 4 JavaScript файла.
Подключение JavaScript файлов:
Распакуйте скачанный архив с исходниками в какую либо папку вашего сайта. Для задействования плагина нам достаточно подключить три из имеющихся js файлов. Для их подключения перед закрывающим тегом добавьте следующие пути к файлам:
<link rel="stylesheet" media="screen,projection" href="ajax/top/css/ui.totop.css" />
<script src="ajax/top/js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="ajax/top/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> <br>
Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.
Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:
<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script><br>
Добавление CSS:
Следующий шаг это добавление CSS стилей, без них кнопка не заработает. Подключить их можно двумя способами.
Первый способ это добавить на все страницы вашего сайта между тегами ссылку на CSS файл стилей:
<link rel="stylesheet" media="screen,projection" href="/css/ui.totop.css" />
Не забудьте только изменить путь к файлу.
Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.
