Кнопка «Наверх» – плагин для MaxSite

Кнопка «Наверх» не так давно уже фигурировала в этом блоге, но в качестве jQuery-скрипта и общих рекомендаций по внедрению в код веб-страницы.

Однако после появления на форуме Maxsite записи Sadovnik'а с описанием конфликта подобной кнопки от DynamicDrive в Firefox 4 c галереями Colorbox и Lightbox я подумал, что неплохо бы оформить это решение плагином, тогда кнопка станет доступной для тех, кто опасается или не хочет лезть в код шаблонов MaxSite.

Чтобы не утяжелять код, в плагин заложены только основные настройки: верхняя граница появления кнопки (зачем она нужна, когда мы и так наверху?), время прокрутки наверх и координаты положения в правом нижнем углу окна.
Кроме того, в опциях можно изменить CSS размеры кнопки, если вы хотите свою собственную картинку. Чтобы кнопка реагировала на мышь, используется спрайт из 3-х картинок сверху вниз:

Спрайт Кнопка «Наверх»
– положение покоя, idle
– курсор над кнопкой, hover
– нажатие, click

Вертикальное CSS смещение для фоновых изображений рассчитывается автоматически исходя из значения опции «Высота кнопки».

Необходимое условие: шаблон страницы должен содержать хуки body_start и body_end:


<body>
...
<?php mso_hook('body_start') ?>
...
<?php mso_hook('body_end') ?>
...
</body>

Эти хуки обязательно имеются в шаблоне default

Если кто-то заинтересуется, попробует и появятся пожелания, можно будет добавить опций вплоть до полного повторения функционала jQuery Scroll to Top Control v1.1 от DynamicDrive, только код распухнет.
Также можно отказаться от необходимости использования хуков body_start и body_end, добавляя HTML элементы с помощью JavaScript, но тогда при его отключении кнопка исчезнет.

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

И в заключение: в браузере Firefox 4 и других, как линуксе так и в винде конфликтов с Colorbox и Lightbox нет.

Upd 15.04.2011, 14:30. Перезалил архив, в него (каталог dev) добавлен файл index_no-hook.php. Переместив его в родительский каталог и переименовав в index.php вы получите плагин, не требующий наличия в шаблоне хуков body_start и body_end.

Upd 22.04.2011. Для наглядности добавил картинки кнопки.

Upd 20.06.2011. Для тех, кто использует на сайте разные JavaScript библиотеки одновременно jQuery, MooTools, Prototype и т. п., добавил в архив файл index_noConflict.php, который у себя на сайте надо переименовать в index.php

Скачать плагин Кнопка «Наверх»

Loading comments …   ←   Кнопка «Наверх» – плагин для MaxSite

Fields marked with asterix are required.


Max 40 alpha-numeric characters, including spaces.


Valid email. Max 255 characters. Not displayed publicly.

*