www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Плавный переход по ссылкам на странице сайта
В настоящее время многие веб-дизайнеры при создании сайтов отдают предпочтение большим (длинным) страницам, так как их удобнее просматривать на мобильных устройствах, чем загружать новые. Можно встретить даже полноценные одностраничные сайты.
Естественно, для длинной страницы желательно иметь быстрые переходы к отдельным частям. Как известно, это реализуется с помощью ссылок на закладки в тексте страницы, так называемым, "якорям". Пример такой навигации по странице показан в начале статьи.
Напомню, как создаётся закладка-якорь.
Создание закладки (якоря) в тексте страницы
Для установки закладки в нужном месте страницы размещается ссылка-якорь вида <a name="Имя закладки"></a>. Для обращения к ней используется обычная гиперссылка с добавлением имени закладки. Если вы ставите ссылки на текущую страницу, то её название можно не указывать, но обязательно надо указать значок #. Таким образом, ссылка на якорь может выглядеть так
<a href="Адрес страницы с якорями#Имя закладки">...</a>, или так
<a href="#Имя закладки">...</a>.
Естественно, переход по таким ссылкам-якорям в пределах одной страницы происходит мгновенно, что выглядит не очень красиво. Для придания изящности можно замедлить переход, то есть сделать плавный скроллинг (опять же см. пример вверху страницы). Этот эффект реализуется проще-простого с помощью небольшого сценария JavaScript и библиотеки скриптов jQuery.
Установка скрипта плавного перехода по ссылкам на странице сайта
Скрипт плавного скроллинга выглядит следующим образом:
<script type="text/javascript">.
$(function(){
$('a[href^="#"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top}, 800);//800 - длительность скроллинга в мс
return false;
});
});
</script>
Этот скрипт необходимо вставить в в заголовок страницы внутрь тега <head>...</head>. Там же надо указать и путь к файлу jQuery. Если на вашем сайте не используются плагины jQuery, то необходимо скачать любую её версию и разместить на сайте. Например, в данном примере используется версия jQuery-1.9.1.min.js. Скачать её можно здесь, а затем распаковать в любую папку на сайте (в нашем примере, папка scripts) и разместить в заголовке строчку:
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>.
Можно jQuery и не загружать на сайт, а обращаться к внешнему ресурсу. В этом случае данную строчку следует заменить на такую:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>.
Подробнее об установке плагинов jQuery можно посмотреть в статье" Вебдизайн с jQuery - это очень просто!".
Далее необходимо разместить якоря на странице сайта. Для этого можно не использовать конструкцию <a name="Имя закладки"></a>, а достаточно добавить атрибут id="Имя закладки" в любой тег в местах закладок, например, в абзац <p id="Имя закладки">...</p>. Не забывайте, что имя закладки должно быть разным для всех якорей.
Конечно, для плавного скроллинга никто не мешает использовать атрибут id и в обычном якоре:
<a name="Имя закладки" id="Имя закладки"></a>.
Кстати, такой способ предпочтительнее, так как в этом случае переход по закладкам будет работать и в браузерах без поддержки JavaScript, но конечно, без эффекта замедления.
Настройка параметров скроллинга
В описанном скрипте плавного перехода по ссылкам на странице сайта можно изменять длительность перехода. В нашем примере - это 800 мс (см. числовое значение в скрипте).
Кнопка возврата в начало страницы
Так как описанный плавный переход работает и вперед и назад, то его можно с успехом использовать для длинных страниц, устанавливая в нужных местах кнопку или картинку возврата в начало. При этом якорь ссылки плавного скроллинга надо разместить в начале страницы (можно в теге <body>). Например, такая кнопка может выглядеть так (кликабельно!):
Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно добавить следующее правило CSS для изображения кнопки:
.scroll_up {
position:fixed; /*Расположение стрелки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;
}
Более подробно о различных способах возврата в начало страницы см. в статье "Кнопка возврата в начало страницы".
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
26.07.2014 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru