Как создать кнопку «Наверх» для удобства посетителей?

3 июля 2014 г. Время чтения: 9 мин. Опубликовано в разделах: FAQ по созданию сайта, Блог, Как сделать?

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

Существует множество различных вариантов, как создать подобную кнопочку на сайте:

Многие, в том числе и автор, отдают предпочтение Javascript. Причин этому несколько —просто, понятно и быстро. Создание кнопки «Наверх» потребует картинки, изображающую стрелку и файлы скрипта. Коды можно получить по ссылкам в тексте, а поиск и выбор иконки по своему вкусу я рекомендую провести в интернете ассортимент просто поражает.

Пошаговая инструкция с необходимыми кодами

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

2. Копируем этот код:

<a id="toTop" href="#"><img src="/images/up.png" alt="« /></a><script type=»text/javascript" src="http://ваш_сайт.ru/top.js"></script><script type="text/javascript">// < ![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
// ]]></script>

Его следует поместить в один из файлов вашего ресурса. Например, при создании кнопки для сайта на DCMS, этот код  вставляется в document.tpl, для WordPress рекомендую — в footer.php, прямо перед закрывающим тегом body.

Внимание! Не забывайте обязательно поменять http://ВАШ_САЙТ.ru/top.js на своё доменное имя и указать свой путь к папке Javascript, если он располагается не в корневой папке.

3. Теперь надо отредактировать CSS файл сайта, чтобы кнопка красиво отображалась. Вставьте теперь этот код в style.css (таблица стиля).

#toTop {
width: 100px;
background: #f1f1f1;
border: 1px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;}

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

Естественно, что CSS код и картинку придётся подгонять/изменять так, чтобы она органично вписалась в общий дизайн вашего сайта.

Понравился пост?

Подпишитесь на ежедневное обновление нашего блога прямо сейчас! Будьте в курсе новостей интернет-маркетинга!

Интернет-магазин и развитие
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Интернет-магазин и развитие на 100%
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Корпоративный сайт и развитие
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Корпоративный сайт и развитие на 100%
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Сайт-визитка и развитие
Получать новости компании 


×
Сайт-визитка, тексты и развитие
Получать новости компании 


×
Сайт-визитка и развитие на 100%
Получать новости компании 


×
Сайт, тексты и развитие (36 262 р)
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж и Google.Adwords
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ и Adwords
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ 35 300 руб.
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Курс «Продвижение сайта без бюджета»
Получать новости компании 


×
Курс «Продвижение сайтов. Модуль 2»
Получать новости компании 


×
Курс «Профессиональная работа с контекстной рекламой»
Получать новости компании 


×
Курс «Создание Landing page + Яндекс.Директ»
Получать новости компании 


×
Курс «Создание сайта на Joomla 3! Модуль 2. Разработка»
Получать новости компании 


×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании 


×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании 


×
Курс «WordPress. Модуль 1. Управление сайтом»
Получать новости компании 


×
Курс«WordPress. Модуль 2. Разработка»
Получать новости компании 


×
Курс «Создание интернет-магазина»
Получать новости компании 


×
Курс «Создание сайта на основе CMS/HTML»
Получать новости компании 


×
Курс «Профессиональная веб-аналитика Google и Яндекс»
Получать новости компании 


×
Курс «Непоисковое продвижение сайтов в Интернет»
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Google Adowrds
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds 2 месяца
Получать новости компании 


×