Расширения

Обзор Top of the Page. Кнопка «Вверх» для Joomla

  • Тип – плагин, который позволяет прокручивать страницы сайта Joomla вверх.

 

 

Top of the Page – это плагин, позволяющий прокручивать страницы сайта Joomla вверх. Поддерживается Joomla 1.6 - 2.5. Во фронтальной части сайта выводится кнопка для перехода к началу страницы (к её верху). Данный плагин будет полезен для тех сайтов, которые содержат длинные материалы, для полного просмотра которых пользователю необходимо прокручивать «несколько экранов». Для того, чтобы вернуться к началу страницы и, например, воспользоваться поиском или перейти при помощи меню в другой раздел сайта, пользователю необходимо или прокрутить страницу при помощи вертикальной полосы прокрутки, или нажать на клавиатуре клавишу PageUp и так далее. А можно просто нажать мышкой на появившуюся кнопку Вверх и перейти к началу страницы.

К основным особенностям Top of the Page относятся следующие:

  • Поддержка Joomla 1.6, 1.7, 2.5.
  • Простота установки и лёгкость настройки.
  • Поддержка мультиязычности.
  • Гибкое стилевое оформление кнопки.
  • Поддержка в качестве кнопки как текста так и изображения.

Обзор будет проводиться для последней на момент написания статьи (01.03.2012) версии Top of the Page 1.8, Joomla 2.5.

Кнопка вверх Joomla может быть настроена под Ваш сайт так, как необходимо учитывая особенности дизайна. Давайте рассмотрим настройки плагина Top of the Page (рисунок ниже).

Настройки Top of the Page

  • Опция Button Reveal Position позволит Вам задавать высоту (в пикселях), после достижения которой будет отображаться кнопка. То есть Вы указываете на сколько пользователь должен «прокрутить» страницу вниз, чтобы появилась кнопка «Вверх».
  • Если Вы хотите использовать в качестве фона кнопки рисунок, то опция Omit Button Text позволит Вам это сделать, убрав текст, подгружаемый из языкового файла.
  • Включив опцию AlwaysatTop, Вы указываете на то, что необходимо всегда начинать отображение страницы сверху. Если, например, Вы ссылаетесь с одной страницы сайта на другую, используя якорь, находящийся в конце страницы, то лучше отключить данную опцию.
  • Smooth Scroll. Позволяет использовать плавную прокрутку страницы.
  • Scroll Duration. При помощи данной опции Вы сможете задавать скорость плавной прокрутки (в условных единицах). 1000 условных единиц = 1 секунда.
  • ScrollTransition. Данная опция позволит настроить «эффект» при прокрутке страницы вверх. Она работает, если включена опция Smooth Scroll. Вам будет доступен один из двенадцати «эффектов».
  • Link Location. Вы можете выбрать одно из шести мест для отображения кнопки «Вверх» на странице. Вверху слева, по центру, справа или внизу слева, по центру, справа.
  • Опция Use Styles включает или отключает использование пользовательского стиля ссылки. Если данная опция выключена, то будет использоваться стиль Вашего шаблона сайта. Если включена, то Вы сможете задать уникальный стиль отображения кнопки в поле Link Style.

Давайте рассмотрим несколько вариантов оформления кнопки. Если Вы хотите использовать в качестве кнопки «Вверх» изображение, то сперва создайте его в любом растровом редакторе и сохраните в папке с сайтом. Например, файл, который Вы создали (или нашли в интернете), называется button.png и находится в папке images Вашего сайт. Тогда содержимое поля Link Style может выглядеть примерно так:

#gototop
{
width: 70px;
height: 30px;
background-image: url(/images/button.png);
}

Где параметры width иheight указывают на ширину и высоту изображения кнопки.

Вы можете столкнуться с проблемой когда изображение «прилипает» к краям экрана. Вы можете сделать размер «холста» изображения (на примере растрового редактора Adobe Photoshop) больше, чем непосредственно рисунок самой кнопки. А «избыточную» часть сделать прозрачной. Причём, если кнопка у Вас на сайте размещается в правом нижнем углу, то рисунок кнопки на «холсте» в Adobe Photoshop должен размещаться в левой верхней части. Донастроив параметры width иheight, Вы добьётесь красивого (без «прилипания» к краям) отображения кнопки на сайте.

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

#gototop{border:0px solid #000;margin:5px;padding:5px;background-color:#9BDCED;color:#000000;} #gototop:hover{background-color:#D4EFF6;color:#8A6D51;}

Где параметр border: – толщина обводки кнопки (в пикселях), solid – цвет обводки, margin – отступ от краёв окна браузера (в пикселях), padding – отступ от текста кнопки (слова «Вверх») до границы (в пикселях). Другими словами, при помощи padding Вы можете увеличить или уменьшить саму кнопку, если она реализована не при помощи изображения. background-color – цвет фона (вне фокуса курсора мыши), color – цвет шрифта (вне фокуса курсора мыши), #gototop:hoverbackground-color – цвет фона в фокусе мыши, #gototop:hover color – цвет шрифта надписи в фокусе мыши.

Как Вы могли заметить кнопки вверх Joomla сайта с данным плагином у Вас не будет проблем.

Top of the Page позволит Вам повысить удобство пользования сайтом. Не смотря на то, что подняться к началу страницы существует множество способов, Top of the Page всё равно будет полезен и удобен Вашим пользователям. Однако стоит помнить, что на тех сайтах, где шаблон рассчитан на 100% ширины окна браузера, кнопка «Вверх» может перекрывать содержимое страницы. Поэтому стоит внимательно просмотреть работу Top of the Page и определить, не мешает ли он пользователям.

Русификатор Top of the Page

Скачать русификатор Top of the Page.

 

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

На этом сайте есть контакты и информация обо мне. На нём Вы найдёте примеры моих работ, а также перечень и цены предоставляемых услуг.

 

Полезные ссылки: