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

Периодически возникает потребность на разных проектах реализовать кнопку «Вверх» для быстрого перемещение в начало страницы без «ручной» прокрутки вертикального «ползунка» браузера. В новых версиях шаблонов 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. Может и больше. (Недавно столкнулся с этой проблемкой.)
Добавить комментарий


Планируете проект?

Заполните форму, наш специалист свяжется с вами для консультации (бесплатно), составит для вас персональное предложение.

Как к вам обращаться?
Сообщите корректный адрес электронной почты.
Не корректный номер.
Опишите кратко суть задачи: *
Необходимо подтвердить согласие с Политикой.

Планируете создание веб проекта?

Заполните форму и наш специалист свяжется с вами для консультации и составит для вас персональное предложение.

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

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

Обращаем ваше внимание на то, что данный интернет-сайт носит исключительно информационный характер и не является публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса РФ. Для получения подробной информации о стоимости указанных услуг, пожалуйста, обращайтесь по телефону: +7(916) 107-51-99 или через Форму обратной связи. Политика конфиденциальности / Соглашение об обработке персональных данных.

©2010–2022 веб-лаборатория «Reklama-No» | Создание, поддержка и продвижение сайтов