Приветствую вас, друзья мои. Сейчас я освящу наверное один из самых популярных вопросов в области «быстрых рецептов» на html/css/js. А именно — создание кнопки «наверх», которая так часто встречается на самых различных ресурсах. И как обычно, пишу я это не просто так, а исходя из своего личного опыта, ибо вы можете заметить у меня такую кнопку в нижней правой части экрана.
Создание кнопки, как и любого активного элемента на веб-странице, делится на три основные части. Необходимо написать html код самой кнопки, навести марафет с помощью css стилей и оживить кнопку с помощью js кода. О каждом этапе в подробностях, поехали!
HTML код кнопки «наверх»
Начать логичнее всего непосредственно с самой кнопки. Существует огромное количество вариантов, но я расскажу о самом визуально красивом способе нарисовать стрелочку на веб-странице — с помощью набора иконок Font Awesome.
Установка Font Awesome заключается в распаковке набора иконок и css стилей в файловую систему своего сайта. Скачиваем набор на официальном сайте, кстати, там же находится подробная инструкция по внедрению иконок на сайт. Открываем свой файловый менеджер и грузим распакованную папку с иконками на сайт. На момент написания инструкции — font-awesome-4.7.0. Соответственно в моем случае иконки стали доступны по адресу
mindhalls.ru/wp-content/themes/mindhalls/inc/font-awesome-4.7.0/
Теперь сам html код кнопки «наверх», который нужно поместить в подвал сайта, лучше всего в самый низ веб-страницы.
<a href="#" class="scrollup"> <i class="fa fa-arrow-circle-up"></i> </a>
CSS стили кнопки «наверх»
В коде страницы кнопка появилась, но до тех пор, пока мы не подключим Font Awesome и не наведем красоту на саму кнопку, никто ее не увидит. Подключить иконки можно строкой.
<link rel="stylesheet" href="//mindhalls.ru/wp-content/themes/mindhalls/inc/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css">
Но если сайт работает на WordPress, то лучше сделать по уму и зайти в functions.php темы, найти там строку add_action( ‘wp_enqueue_scripts’, ‘mindhalls_scripts’ ); вторым аргументом является название функции(в том же файле), в которую нужно дописать вот такой код.
wp_enqueue_style('font-awesome-min-styles', get_template_directory_uri() . '/inc/font-awesome-4.7.0/css/font-awesome.min.css', false);
Где часть /inc/font-awesome-4.7.0/css/font-awesome.min.css нужно заменить на ваш путь до файла. В этот самый момент WordPress нас поймет и подключит иконки в хедер автоматически.
Кроме иконок, нужно настроить расположение, размер и прочие характеристики кнопки. Дописываем правила для класса scrollup в основной файл css стилей вашего сайта. В случае сайта на WordPress это style.css.
.scrollup {
color: #104e6b;
position: fixed;
width: 50px;
height: 50px;
bottom: 40px;
right: 30px;
display: none;
font-size: 60px;
text-align: center;
vertical-align: middle;
}
.scrollup:hover {
color: #21759b;
}
При такой настройке кнопка появится в правом нижнем углу и будет размером 60x60px(потому что наша стрелочка это символ, соответственно ее размер меняется правилом font-size). Например, для того, чтобы переместить кнопку в левую нижнюю часть экрана, нужно поменять правило right: на left:.
JavaScript код кнопки «наверх»
Пришло время оживить кнопку. Она будет исчезать, когда экран пользователя прокручен до верха страницы, и появляться в противном случае. Кроме того, наделим нажатие на нее способностью возвращать экран на самый верх страницы сайта. Создаем новый js файл и пишем туда инструкции.
jQuery(function($) {
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
});
Осталось подключить этот js файл на все страницы сайта. Сделать это можно все в той же функции, где мы подключали иконки, дописав туда такую строку.
wp_enqueue_script('scroll-to-top', get_template_directory_uri() . '/js/scroll-to-top.js');
Где /js/scroll-to-top.js нужно поменять на путь до вашего js файла.
Заключение
После этих несложных манипуляций у вас на сайте появится заветная кнопка. Внимание! Самое главное — не забывайте менять пути из приведенного кода на свои, и тогда у вас точно не возникнет проблем с установкой. На этом у меня все, спасибо за внимание!