Модуль из предыдущего видео для Joomla! 2.5 не подходит, поэтому пришлось выискивать альтернативу. А конечный результат получился даже ещё лучше. Пример работы плагина Top of the Page на этом сайте, просто немного прокрутите страницу вниз.
Карточка расширения Top of the Page:
{tab Скачать|danger}
{tab Дополнительная информация|info} Тип расширения: Плагин
Версия: 2.0
Совместимость: 2.5 и 3.x {tab Ссылки/Демо|success}
{/tabs}
О плагине Top of the Page
Этот урок записан по следам прошлого, в котором мы для Joomla 1.5 делали кнопку возврата к верху страницы. То есть, пользователь прокручивает ниже, увлеченно читает материалы на Вашем сайте и добравшись до самого низа теряет менюшку. Он просто кликает на эту кнопку и его автоматически возвращает браузер на самый верх.
Нечто подобное мы сделаем для Joomla 1.7. Так как, тот модуль не подходит для версий 1.7 и 2.5, пришлось немало потрудиться и найти решение, которое даже лучше. У нас в этот раз будет не модуль, а плагин.
Шаг 1. Установка плагина
Обычная установка - РАСШИРЕНИЯ => МЕНЕДЖЕР РАСШИРЕНИЙ => Загрузить файл пакета.
Переходим в РАСШИРЕНИЯ => МЕНЕДЖЕР ПЛАГИНОВ.
Здесь находим строку - Top of the Page и заходим в настройки.
Шаг 2. Включение плагина
В разделе Подробно включаем плагин.
Проверяем на сайте, что получилось. Появилась желтая кнопка с черными буквами на которой написано "Return to Top". Естественно, это не устроит большинство. Перейдем к настройкам.
Шаг 3. Меняем кнопку
Смотрим Основные параметры. Настройка отвечающая за внешний вид кнопки находится под строкой Link Style.
Мы предлагаем сделать свою картинку. Также Вы можете получить картинку другим способом, описанным в уроке "Автоматическое создание кнопок и логотипов". У нас же кнопка подготовлена и закачана на сайт.
Следующим шагом является изменение стиля. Прописываем под Link Style свой код, старый можно полностью удалить и заменить, за исключением идентификатора #gototop. Иначе плагин не будет работать.
Пример кода:
margin-right: 150px; (отступ от края окна справа)
margin-bottom: 15px; (отступ от края окна снизу)
width: 110px; (ширина кнопки)
height: 35px; (высота кнопки)
background-image: url(../images/gototop.png); (путь к картинке кнопки)
}
Получилась такая экспериментальная кнопка.
Шаг 4. Основные параметры
Пройдемся по другим пунктам раздела Основные параметры.
- Button Reveral Position – Указывается на какое количество пикселей пользователь должен прокрутить страницу вниз, чтобы появилась кнопка.
- Omit Button Text – Включение (отключение) текста на кнопке плагина по умолчанию.
- Scroll Duration – Время появления (исчезновения) кнопки на экране. По умолчанию - 500 (полсекунды).
- Transition Easing – Эффекты исчезновения кнопки.
- Link Location – Место на экране, где будет появляться кнопка. По умолчанию - Bottom Right (внизу и справа).
- Use Styles – Обязательно должно быть включено использование находящихся ниже стилей.
Используйте на своих сайтах такую кнопку, она здорово облегчает жизнь пользователя.
Комментарии
Ну вот видите, не нужно опускать руки. У меня при подготовке видео тоже не всегда с первого раза всё работает, приходится искать причины и способы устранения
Получилось, но не так как у вас в видео уроке (#gototop{margin:30px;padding:25px 48px;background-image:url(-----------);})
Отлично работает на той же версии. Про Return to Top есть в видео
Решение конечно нестандартное, но действенное. Поставил отступ справа -30px. Всё лишнее уехало
Фиг знает. Всё равно две. Ну да ладно. Как нибудь потом разберусь. Пусть две будет пока.
Чё-то как-то я тоже не пойму. В исходном коде только одна прописана. Попробуйте удалить плагин и заново поставить
Похоже на конфликт с шаблоном, попробуйте проверить например на стандартном. И второе. Я тестировал расширение на сайте в сети, а на локалке проблемы могут быть