Веб-дизайн и поисковая оптимизация

Вебдизайн с jQuery — это очень просто!

• Фотогалерея jQuery — просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
Zoomy — лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery

Кнопка возврата в начало страницы

В предыдущей статье был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга — кнопка возврата в начало страницы.

Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами CSS :
position:fixed; /*Расположение кнопки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;

Для особо ленивых товарищей удобно вместо картинки кнопки использовать символы Юникода, оформив их с помощью правил CSS. О том, как выбрать подходящий символ-значок, рассказано в статье «Символы Юникода — полезные значки для сайта». Например, используя значок с кодом , можно получить следующую кнопку:

Оформление кнопки сделано с помощью следующих правил CSS:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;

Описанный способ имеет один недостаток: кнопка возврата наверх выводится постоянно. Чтобы она появлялась только при движении вниз по странице, можно использовать немного измененный скрипт — плагин jQuery liScrollToTop.

Работу этого плагина демонстрирует стрелка справа внизу этой страницы. Кроме появления кнопки только при скроллинге, в плагине добавлена анимация — плавное появление и исчезновение кнопки.

Установка плагина liScrollToTop

Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop. Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css.

Далее, в заголовок страницы внутри тега . вставляем следующие строчки, где указан путь к новым файлам и небольшой javascript для инициализации плагина:

Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV:

Возврат страницы вверх

Переход на начало страницы

В одной из конкурсных работ после каждого раздела на длинной странице поставлена внутренняя ссылка (якорь):

Да, это правильное решение. Есть только две рекомендации.

  • Первая касается дизайна. Такие ссылки кажутся не слишком понятными, когда расположены среди текста на странице. Их лучше выносить на поле слева от текста в виде текстовой ссылки вверх или в виде ссылки-картинки с изображением стрелочки, направленной вверх (в отличие от изображения домика, который обозначает ссылку на главную страницу). Дополнительная рекомендация: рисуйте домик так, чтобы он был на самом деле похож на домик, а стрелочка — на стрелочку.
  • Второе замечание касается навигации. Якоря усложняют движение по кнопке Назад браузера. Нажав эту кнопку, пользователь ожидает попасть на предыдущую страницу, но браузер “пятится” по якорям-ссылкам на текущей странице. Если якоря щелкались часто, браузер будет долго по ним прыгать, и пользователь перестает понимать: то ли он уже на предыдущей странице, то ли все еще на текущей.

Для навигационного действия “на начало” можно легко обойтись без якоря, заменив его скроллом в начало страницы. Правда, для этого придется воспользоваться функцией окна scroll, написав маленький код на JavaScript. Но это, действительно, очень маленький и простой код:

Здесь:

  • href="javascript:void(0)" — задает “пустую” ссылку;
  • onclick="scroll(0,0)" — задает скролл в начало при щелчке по тегу.

Описанный код отображается на странице так:

Атрибут onclick задает действие, которое должен выполнить браузер при щелчке пользователя по образу тега на экране. Значением атрибута в нашем случае является вызов стандартной функции scroll(0,0). Эта функция задает перемещение окна в нужные координаты (в записанном коде — в начало страницы, как по горизонтали, так и по вертикали). Вместо текстовой ссылки можно использовать рисованную кнопку:

Смотрите так же:  Сколько должны выплачивать пособия на ребенка

Ниже изображен пример такой навигационной кнопки, расположенной в одной строке с адресом автора.

Иван Сидоров [email protected]

Иногда страница сайта может быть очень длинной. Например, если вы захотите выложить очень много текста. Для возвращения вверх можно воспользоваться колесом прокрутки, или бегунком. Но на многих сайтах для возвращения назад существует соответствующая ссылка или кнопка, нажав на которую, вы даёте команду браузеру и он быстро возвращает страницу в исходное положение.

Подобную ссылку можно прописать минимум четырьмя способами. рассмотрим их преимущества и недостатки.

Пропишем ссылку подобно тому, как прописываются «якоря» для страницы, о которых шла речь в Уроке 16 Выглядеть это будет так:

Вверху страницы вы ставите «якорь». Например, я поставила в него часть заглавия страницы: «В этом разделе. «

У этого способа есть один недостаток. Браузеры не всегда адекватно себя ведут с подобными ссылками. Например, если вы наведёте курсор мыши на надпись вверху страницы «В этом разделе» — то скорее всего вы увидите, что помещённая в «якорь» часть фразы начинает отображаться, как ссылка.

Для того, чтобы ничего такого не происходило и не нужно было искать, что бы поместить в «якорь», можно поступить по способу 2.

Можно попробовать просто разместить внизу станицы ссылку вида:

Теоретически, ни один браузер не должен возражать против такого способа и по клику возвращать страницу в исходное положение. Но более надёжно поступить следующим образом, который мы рассмотрим в способе 3.

Разместим внизу страницы ссылку вида:

При данном способе мы задействуем указание на прокрутку-возвращение по клику, где значения (0,0) — это перемотка страницы на указанное количество пикселей по горизонтали и вертикали. Если мы обнулим эти значения, то любой браузер воспримет нашу ссылку как указание вернуться в исходное положение, то есть, на начало страницы. И наконец, чуть отличающийся четвёртый способ.

Этот способ основан на JavaScript и так же, как предыдущий, однозначно работает в любом браузере. В низу страницы, под вашим текстом или картинками вы размещаете следующую конструкцию:

Здесь, как видите, тоже есть указание на то, чтобы прокрутить страницу на указанные пикселы (0,0), которые мы обнуляем и в результате, когда мы нажимаем на данную ссылку, браузер возвращает страницу в первоначальное положение.

Само собой, во всех указанных способах можно вместо слова «НАВЕРХ» расположить картинку, обозначающую возвращение к началу страницы.

Примечание: вместо надписи «НАВЕРХ» (Вернуться к началу, Вверх, К оглавлению и т.п.) вы можете поставить картинку, вписав её код вида

© М.В. Гуминенко. 2009 г.
По вопросам использования материалов сайта обращаться по адресу: [email protected]

Возврат страницы вверх

В случае если тегу уже присвоен определенный id, тогда в коде вызова кнопки, размещенном чуть выше, #top нужно заменить на #ваш-id

При помощи CSS заданы отступы и внешний вид кнопки, добавлено свойство transition: для создания эффекта задержки при наведении курсора. Вставлять его лучше в CSS файл вашего сайта.

Первая строчка — это подключение библиотеки, если к вашему сайту она уже подключена значит опускаем ее. Весь код помещаем между тегами . .

Расширения для Joomla и плагины для WordPress позволяющие создавать кнопку «Наверх».

На мой взгляд на любой CMS лучше всего использовать одно из представленных выше решений, но если вы не знаете как подключить приведенные скрипты к своему сайту на Joomla или WordPress, то можете воспользоваться следующими готовыми, бесплатными расширениями и плагинами.

Кнопка вверх WordPress — лучшие плагины

Всем привет! У вас есть на сайте кнопка вверх WordPress для плавной прокрутке страницы на верх? Ещё не установили. Давайте не откладывайте установку волшебной кнопки на потом, ведь с кнопкой вверх на сайте очень удобно, особенно вашим посетителям. Без неё ну ни как, меня просто бесит когда на сайте её нет. Приходится колёсико крутить для того, чтобы вернуться к началу страницы. Плохо, очень плохо без кнопочки. Надо веб-мастерам больше заботится о своих посетителях.

Дамы и господа, будьте внимательней к своим читателям, а то потеряете их навсегда.

Сегодня я познакомлю вас с лучшими плагинами с помощью которых вы сможете установить кнопку Back to top на свой сайт или блог. Плагины подобраны по наибольшему скачиванию модулей пользователями платформы WP. Напомню, все плагины можно установить стандартным способом, из админки, через поиск и загрузчик плагинов. Скачивать ни чего не надо. Установил, активировал, настроил и всё.

Как сделать кнопку вверх на сайте. Плагины — кнопка вверх для WordPress

Первым у нас пойдёт простой плагин jQuery Smooth Scroll

Простой плагин jQuery Smooth Scroll

Данный плагин автоматически добавляет кнопку вверх, после установки и активации модуля. Кнопка вверх появится в правом нижнем углу сайта. Как говорится, установил и забыл. Установили плагин уже более 50 700 раз. А вот так выглядит наша кнопочка:

Смотрите так же:  Письмо на возврат денежных средств покупателю по безналичному расчету

Кнопка вверх на сайте WP

Следующий легкий плагин Smooth Scroll Up — плавная прокрутка вверх

Плагин Smooth Scroll Up имеет минимальные настройки. Такие как: выбор разных элементов для кнопки вверх:

Опции для настройки плагина Smooth Scroll Up

Плагин на русском языке, так, что проблем с настройками кнопки вверх у вас не возникнет.

Плагин WPFront Scroll Top

Данный плагин имеет больше настроек и главное, очень большой выбор иконок (изображений) самой кнопки. А так же можно обойтись и без картинки:

Настройка плагина WPFront Scroll Top

И сами изображения кнопок, есть из чего выбрать. Даже, если вам не подходит ни одна картинка кнопки на верх, можно указать ссылку на своё изображение кнопочки:

Выбор кнопки вверх

Согласитесь, довольно приличный набор картинок для волшебной кнопки. Правда, плагин на английском языке, но Google переведёт. А вот пример установленной кнопки на сайте:

Кнопка вверх

Плагин Scroll Back To Top — кнопка на вверх

Модуль Scroll Back To Top также имеет ряд настроек и выбора как будет выглядеть кнопка на верх:

Настройка плагина Scroll Back To Top

И собственно выбор самой кнопки:

Выбор кнопки на вверх

А вот пример кнопочек на сайте WordPress:

Пример кнопок вверх на сайте

Вот пожалуй и всё. По моему достаточно плагинов с помощью которых вы сможете установить кнопку вверх на сайт ВордПресс. Выбор за вами, дорогие друзья. Надеюсь вам пригодится данный обзор. Удачи и до встречи.

Прокрутка страницы вверх при нажатии на вкладку

С новым обновлением оперы, когда нажимаешь на текущую вкладку, страница автоматически пролистывается в самый свой верх. Лично для меня это весьма неудобно. Может кто-то знает, как это отключить?

Вставьте в адресную строку :

и выберите «Disabled»

Этот способ уже не работает на 56.0.3051.36!

Этот способ уже не работает на 56.0.3051.36!

Разумеется не работает. Раньше, 8 месяцев назад, работало. Теперь эта настройка перешла в раздел настроек : Настройки>Дополнительно>Интерфейс пользователя>Прокручивать страницу вверх при нажатии на активную вкладку.

55.0.2994.61 вышла 12 сентября. В ней нет «Прокручивать страницу вверх при нажатии на активную вкладку», но есть chrome://flags/?search=tab%20#scroll-on-active-tab-on-click

@emoxam Причем тут версия 55.0.2994.61 ? Вы писали, что написанный мной комментарий, который я оставил на форуме 8 месяцев назад. — не работает на Opera 56.0.3051.36. Я и написал, что раньше работало. Я не слежу за версиями, касательно именно этой настройки. С каждой новой версии Opera появляются разные изменения, как в дизайне, так и появления и изменения разных настроек. Сегодня эта настройка есть, а в следующей версии она может измениться. Вот и все.

А я посчитал что вы сказали что настройка переехала 8 месяцев назад, пардон.))
Я изначально прокомментировал чтобы предупредить народ от обновления, но если это теперь в настройках тогда ой.

Гид по дизайну кнопки возврата в начало страницы

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

Необходимость вернуться к началу сайта может возникнуть по разным причинам. Чаще всего пользователи возвращаются обратно, чтобы:

  • открыть главное меню и выбрать новое направление поиска;
  • воспользоваться возможностями системы фильтров и сортировки;
  • ввести или изменить запрос в поле поиска.

Операционные системы и некоторые браузеры уже предлагают своим пользователям простые и быстрые способы вернуться к началу страницы: нажатием кнопки Home на клавиатуре, кликом по вкладке в Яндекс.Браузер, использованием команд из контекстного меню и пр.

Однако, хотя технически подкованные пользователи, скорее всего, уже давно осведомлены обо всех этих способах, большинство остается в неведении. Эти методы не столь очевидны для среднего пользователя Сети, который привык прокручивать страницу при помощи пальца или мыши.

Когда страница очень длинная (например, из-за бесконечного скроллинга), ее ручная прокрутка через экраны контента становится делом весьма утомительным. Таким образом, кнопка возврата к началу страницы оказывается очень и очень востребованной.

Ниже — 9 рекомендаций, в каких случаях следует использовать эту кнопку и как сделать ее действительно эффективной.

9 рекомендаций по созданию эффективных «back-to-top»-кнопок

1. Используйте эту кнопку на страницах, длина которых превышает 3-4 экрана. Для относительно коротких страниц такая кнопка будет излишней — люди смогут отмотать страницу и вручную без особых проблем. Не стоит загромождать интерфейс, если полоса прокрутки или простой тап существенно не усложнят опыт пользователя.

Смотрите так же:  Ралько василий нотариус

2. Разместите кнопку в правом нижнем углу страницы и сделайте ее постоянной (даже при скроллинге она не должна исчезать из виду). Это именно то место, где пользователи и ожидают ее увидеть — оно хоть и находится где-то в стороне от основного контента, но остается заметным. Размещение кнопки в другом месте обычно делает ее более незаметной.

3. Пометьте кнопку словом «Наверх» или фразой «Вернуться к началу». Если ограничитесь одной иконкой (например, стрелкой, указывающей вверх), можете оказаться непонятыми. Неоднозначное графическое исполнение может привести к ошибочной интерпретации назначения кнопки.

MedlinePlus.gov: предназначение одиноко стоящей стрелки слишком туманно. Текстовая надпись могла бы помочь преодолеть любое непонимание в данном контексте

Overstock.com: надпись «Назад к началу», размещенная рядом с иконкой, помогает объяснить назначение кнопки

Вариант, предложенный Вконтакте

4. Заведите одну постоянную кнопку для каждой страницы. Не стоит повторять эти кнопки в каждой секции одной и той же страницы (такое обычно встречается на страницах с анкорными ссылками). Согласно результатам юзабилити-исследований, люди игнорируют эти дублирующие друг друга ссылки, потому что они слишком предсказуемы.

USA.gov: повторяющиеся кнопки «Назад к началу» визуально захламляют страницу, что делает их еще более незаметными

5. Кнопки должны быть небольших размеров и не перекрывать важные элементы страницы. Однако, если речь идет о мобильной версии сайта, то кнопка должна быть достаточно большой, чтобы на нее было удобно кликать пальцем.

6. На фоне всей страницы кнопка должна выделяться. Если кнопка будет сливаться с окружающими элементами или фоном, маловероятно, что кто-нибудь заметит ее и использует.

7. Рассмотрите вариант использования отложенного появления кнопки, когда ссылка появляется только после того, как пользователь обнаружит свое желание отмотать страницу обратно (например, начинает перемещать ползунок полосы прокрутки вверх). Таким образом, кнопка будет появляться только тогда, когда в ней будет возникать необходимость, без риска закрыть собой какие-либо важные составляющие сайта.

Overstock.com: кнопка «К началу» появляется только тогда, когда пользователь начинает прокручивать страницу вверх (она, кстати, расположена в нижнем правом углу)

8. Сделайте кнопку стационарной. Как только кнопка появилась, не позволяйте ей изменять свое положение. Движущиеся элементы сильно раздражают и отвлекают, поскольку глаза человека автоматически реагируют на каждое движение, происходящее на экране.

9. Позвольте людям контролировать прокрутку. Не делайте так, чтобы страница прокручивалась автоматически. Лучше ограничиться уведомлением и предоставить пользователю самостоятельно решить, стоит ли ему прокручивать страницу, чтобы посмотреть новый контент, или нет.

Альтернативы кнопке возврата к началу страницы

Есть множество альтернативных способов, как помочь людям попасть туда, куда они хотят. Кнопка «Вернуться к началу» — одно из средств достижения этой цели. Если вы сможете предвидеть то, в чем будут нуждаться пользователи, и предложить им это, будет даже лучше. Ниже приведены несколько идей.

1. Навигация в футере страницы может удовлетворить тех, кто хочет вернуться к началу, только чтобы открыть меню и выбрать другой раздел. Этот подход работает лучше, когда пользователи склонны прокручивать очень длинные страницы до самого футера.

Etsy.com: Вместо кнопки возврата к началу этот сайт предлагает полноценное меню в футере сайта, так что пользователь может продолжить свое путешествие по сайту прямо отсюда

2. Липкие меню иногда более элегантное решение, чем back-to-top-кнопки. Если основная цель прокрутки — перейти к другим разделам сайта, то липкое меню, которое будет всегда под рукой, просто избавит людей от необходимости возвращаться.

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

Nordstrom.com: на этом сайте система фильтров закреплена в левом сайд-баре, что избавляет пользователей от необходимости возвращаться к началу страницы для выполнения большинства шоппинг-задач

3. Кнопка «Домой» (Home) на социальных сайтах часто возвращает пользователя к началу его главной страницы, которая по сути является страницей с длинной лентой новостей (фидом). Большинство людей ассоциируют клик по кнопке Home с возвратом к началу этой ленты.

Хотя кнопка «Домой» и работает на социальных сайтах, на других типах веб-ресурсах на нее рассчитывать не стоит. На обычных сайтах, кликая по кнопке «Домой», люди будут ожидать возврата к главной странице сайта, а не к началу текущей страницы.

Twitter.com: ссылка Home дублирует функцию кнопки возврата к началу

Сегодня существует большое количество методов и техник быстрого возврата пользователей к верхним частям страницы. Прежде чем вы остановите свой выбор именно на back-to-top-кнопке, рассмотрите и другие варианты и постарайтесь понять, какой из них наиболее предпочтителен для вашей аудитории.