Про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. Может и больше. (Недавно столкнулся с этой проблемкой.)
Добавить комментарий


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

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

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

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

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

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

Получите бесплатную консультацию прямо сейчас!

Веб-студия «Reklama-No» специализируется на разработке сайтов для бизнеса. Для реализации задач вашего будущего/существующего сайта — мы подберем оптимальные решения. Подробно расскажем об особенностях создания веб-ресурса вашей тематики, попробуем ответить на все интересующие вас вопросы максимально полно, доступным языком, оперативно.
Мы понимаем желания/сомнения/проблемы наших клиентов и готовы дать полезные советы по работе с сайтом, опираясь на собственный много-много летний опыт.
Звоните нам и мы решим любые проблемы с вашим сайтом или задачи по его созданию. Хотя, лучше звоните сами.


+7(916) 107-51-99

Обсудите ваш проект со специалистом!

Оставьте свои контакты

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

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

Обращаем ваше внимание на то, что данный интернет-сайт носит исключительно информационный характер и не является публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса РФ. Для получения подробной информации о стоимости указанных услуг, пожалуйста, обращайтесь по телефону: +7(916) 107-51-99 или через Форму обратной связи. Политика конфиденциальности / Соглашение об обработке персональных данных. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

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