Молодогвардейцев 454015 Россия, Челябинская область, город Челябинск 89085842764
MindHalls logo

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

Приветствую вас, друзья мои. Сейчас я освящу наверное один из самых популярных вопросов в области «быстрых рецептов» на 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="http://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 файла.

Заключение

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