Прокрутка вверх
Пользователь, читая длинную статью или урок, часто ищет ссылку для прокрутки в верхнюю часть страницы. В этом уроке мы создадим хороший сценарий, используя jQuery, который будет прокручивать вверх по деланию пользователя. Этот сценарий хорош тем, что он динамичен. Ссылка прокрутки не будет отображаться когда пользователь будет находится в вержней части страницы.
Для начала создания сценария нам понадобится скачать библиотеку jQuery и плагин jQuery. Scroll.
Теперь присоедините два js файла к Вашей HTML странице.
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.scroll.pack.js" type="text/javascript"></script>
После всего текста, перед закрытием тега </body> вставьте ссылку в верхнюю часть страницы.
<a id=”goToTop” href=”#” >Вверх</a>
Теперь нам необходимо создать функцию jQeury, какая будет выполнять переход вверх страницы сайта. Функция выглядит следующим образом:
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>
На этом все. Функцию Вы можете разместить после подключения jQuery библиотеки.
Написанный нами код должен выглядеть примерно таким образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery прокрутка вверх </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery.scroll.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>
</head>
<body>
<div id="content">
<p><!--Здесь должен находиться текст сайта.--></p>
</div>
<a href="#" id="toTop">^ Вверх</a>
</body>
</html>
Последние уроки категории:
Установка jQuery плагина - jDigiClock - Digital Clock
jDigiClock — интересный плагин, выполненный на jQuery. Вдохновением для данного плагина стал виджет Hero Clock на HTC. Плагин может показывать цифровое время и погоду, достаточно удобно настраивается и его легко устанавливать.
Русско-английский переводчик используя Google Ajax API
Google предоставляет разработчикам массу возможностей для работы со своими сервисами. Как вы наверное поняли из названия поста, я буду использовать Google AJAX API. Что же это такое и для чего это нужно можно прочитать здесь и здесь. Для работы нам понадобятся: php и jQuery.
Создаем Ajax конвертер валют
Помимо основных функций поисковой системы Google предоставляет ещё и множество других услуг. Одна из них это калькулятор с расширенными возможностями. Как это можно использовать узнаете в этой статье.
Красивое акордеон меню на jQuery
Комментарии:
daima 22.10.2010 13:17:52
iniline 22.11.2010 20:25:50