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

Сегодня на повестке дня – кнопка наверх для сайта или блога. В данной статье я подробно расскажу о том, как сделать кнопку наверх самостоятельно на любом веб-сайте или блоге. Все необходимые файлы и скрипты для реализации данного функционала будут доступны для скачивания по ходу статьи.

Кнопка наверх для сайта или блога. А стоит ли?

Кнопка наверх для сайта, блога, да и любого современного Интернет-ресурса в настоящее время стала обычным делом. Она значительно упрощает навигацию на больших веб-страницах и повышает юзабилити ресурса. На мой взгляд, наибольшую популярность кнопка наверх получила после своего появления на страницах социальных сетей facebook и ВКонтакте.

На данный момент функцию, которую выполняет кнопка наверх (перемотка страницы к самому началу или верху), можно реализовать различными способами. Практически для каждой CMS можно найти соответствующий плагин или расширение, реализующие данную функцию. Однако, в данной статье, я расскажу о том, как сделать кнопку наверх самостоятельно, без использования дополнительных программных продуктов.

Для реализации функции плавной перемотки к началу сайта или блога потребуются небольшие знания HTML и CSS. Дополнительно потребуется скачать архив с скриптом и моим вариантом кнопки. Не лишним будут знания по Photoshop, если захочется изменить изображение кнопки на собственное – уникальное и оригинальное, соответствующее дизайну Интернет-ресурса.

Как сделать кнопку наверх самостоятельно?

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

1. Скачать этот архив. В архиве находятся два файла: totop.js – файл скрипта, up2.png – файл картинки кнопки. Оба эти файла необходимо закачать на сервер. Самое главное, в дальнейшем правильно прописать путь к данным файлам.

2. Проверить, подключено ли к сайту jQuery. Для этого между тегами <head> и </head> необходимо поискать следующий код:

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.5′></script>

Если данного кода нет, то его необходимо вставить.

3. Вставить код, выводящий кнопку наверх на сайте:

<noindex>
<a id=«toTop» title=«Наверх» style=«display: block;»></a>
<script src=«http://blog.ffonrims.ru/wp-includes/js/totop.js» type=«text/javascript»></script>
<script type=«text/javascript»> $(function() { $(«#toTop»).scrollToTop(); }); </script>
</noindex>

Код желательно вставить перед закрывающим тегом </body>. Для CMS WordPress наиболее подходящим местом будет файл footer.php. Кроме того, необходимо скорректировать путь к файлу со скриптом totop.js:

http://blog.ffonrims.ru/wp-includes/js/totop.js

4. Скопировать код с описанием стиля кнопки наверх в css-файл сайта или блога. К примеру, для блога на CMS WordPress, CSS-файл, скорее всего, находится в папке с темой блога, а именно в wp-content/themes/ваша_тема/style.css.

Описание стиля кнопки:

#toTop {
position: fixed;
bottom: 15px;
bottom: 1,071428571rem;
width: 46px;
width: 3.285714286rem;
height: 46px;
height: 3.285714286rem;
margin-left: 1010px;
margin-left: 79,28571429rem;
background: url(‘img/up2.png’) no-repeat 0 0;
}
#toTop:hover {
background: url(‘img/up2.png’) no-repeat -46px 0;
}

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

Поделится с друзьями: