Заметки на полях

+7(916) 107-51-99 | Москва

+7(916) 107-51-99 Москва

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

Версий подобных кнопок в Интернет очень много, совсем простых и весьма «навороченных». В результате многочисленных проб был выбран «средний» вариант, что однозначно работоспособен на всех опробованных cms, изящен, прост в установке и настройке (пример в эксплуатации на нашем форуме ipb).

Инсталляция кнопки Вверх на сайт

Проcтая кнопка «Вверх» на JQuery

Изображение кнопки: может быть любое (или скачайте предложенную «стрелку» справа). Где-нибудь разместим картинку-кнопку на сервере (например, в папку /images/ в Джумла!, не имеет особого значения).

Перед закрывающим тегом </body> пишем:

<a href="#" class="scrollup">Наверх</a>
<script type="text/javascript" src="/js/scrolltop.js"></script>

Скачиваем скрипт scrolltop.js и «кидаем» его в нужную папку (в данном случае это папка /js/).

В <head> сайта подключаем библиотеку JQuery (если она еще не включена).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

В css сайта добавляем:

.scrollup {
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('/images/icon-top.png') no-repeat;
}

Регулируем отступы до нужных параметров, прозрачность, папку нахождения картинки (если нужно).

Испытано на десятке проектов, проблем не обнаружено.

Примечания и допполнения

  • Работает на разных версиях JQuery
  • При «неотображении» картинки — смотрим firebag (или иной подобный сервис просмотра исходного кода) и дописываем !important — где нужно.
  • Некоторые проекты перенасыщены кодом и могут «перекрывать» изображение кнопки. Пробуем решить с помощью z-index (в css). Назначим, к примеру, z-index:999999. Может и больше. (Недавно столкнулся с этой проблемкой.)

Добавить комментарий

Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Спам удаляется, спамерам: бан по ip навсегда. Email комментаторов не публикуется.

Как заказать услугу? Веб-студия «Реклама-Но!»

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

  Наш телефон: +7(916) 107-51-99 или:
Оставьте свой номер телефона/email и наш специалист свяжется с вами в ближайшее время.

  Наш адрес: Россия, Москва, Слесарный переулок, д. 3
  Электронная почта: [email protected] или Форма обратной связи

Звоните нам и мы решим любые проблемы с вашим сайтом или задачи по его созданию.

Заметки на полях: оглавление

Если есть вопросы по разделу:

* Поля формы обязательные для заполнения.

Задайте свой вопрос, мы обязательно ответим в ближайшее время. Или звоните:
+7(916) 107-51-99 (10.00–18.00, Мск.)

Как к вам обращаться?

Сообщите корректный адрес электронной почты.

Пожалуйста, напишите ваше сообщение.

Неверный проверочный код.

заказать изготовить сайт

Веб-лаборатория «Реклама-НО!» благодарит вас за посещение своего сайта. Если вы хотите поделиться отзывом на Яндекс и поставить оценку, перейдите по ссылке:

Оставить отзыв

изготовление сайтов под ключ

Разработка сайтов «под ключ» любой сложности и назначения!

  • Россия, г. Москва, Слесарный переулок, д. 3
  • +7(916) 107-51-99
  • 10.00–18.00 (ежедневно)

изготовить сайт  изготовить сайт

Не забудьте, что у нас: