Простая кнопка "вверх".

Автор:
Back to top

Навигация играет ключевую роль в удобстве работы с сайтом. Когда страница получается длинной - например, содержит много текста, картинок или комментариев - возникает необходимость быстро вернуться в начало. Конечно, можно прокручивать колесо мыши или тянуть ползунок, но это не всегда удобно. Именно для этого и создаётся кнопка «Наверх» (Back to Top), которая позволяет в один клик подняться к шапке страницы. Это простое решение делает сайт современнее и заботится о ваших посетителях.

В этой статье я покажу, как установить простую кнопку «вверх», всего в три шага. Для иконки мы будем использовать иконочный шрифт Font Awesome.

Содержание статьи

Подключаем иконки Font Awesome

В шаблоне вашего сайта (перед закрывающим тегом </head>) вставляем строку: 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">

А сразу под ней - сам якорь для кнопки:

<a href="#" id="toTop" title="Наверх"><i class="fa fa-angle-up"></i></a>

Добавляем стили CSS

Ниже приведён минимальный набор стилей для кнопки. Их нужно вставить в шаблон (например, перед строкой ]]></b:skin>): 

#toTop {
    overflow: hidden;
    position: fixed;
    z-index: 90;
    right: 30px;
    bottom: 31px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.16), 
                0 2px 10px rgba(0,0,0,0.12);
    display: none;
    color: #eee;
    text-align: center;
    background-color: #555;
    font-size: 22px;
    width: 42px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 2px;
    transition: all .5s;
}
#toTop:hover {
    background-color: #888;
    color: #fff;
}

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

Подключаем скрипт

Для плавной прокрутки и появления кнопки нужен небольшой скрипт. Его нужно вставить перед закрывающим тегом </body>: 

<script type="text/javascript">
jQuery(document).ready(function($){
    var toTop = $("#toTop");
    $(window).scroll(function(){
        if($(this).scrollTop() >= 200){
            toTop.fadeIn(200).css("bottom", "25px");
        } else {
            toTop.fadeOut(200).css("bottom", "-60px");
        }
    });
    toTop.click(function(e){
        e.preventDefault();
        $("html, body").animate({scrollTop:0}, 400);
    });
});
</script>

Важно: подключение jQuery

Для корректной работы кнопки «Back to Top» должна быть установлена библиотека jQuery. Если она ещё не подключена, добавьте в <head> эту строку: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Итог

После сохранения шаблона и обновления страницы в правом нижнем углу появится удобная кнопка «Наверх».

  • Можно изменить внешний вид с помощью CSS;
  • Задать другое расположение (например, слева);
  • Заменить иконку на любую из Font Awesome (например, fa-arrow-up).

Теперь ваши посетители смогут перемещаться по длинным страницам с комфортом.

Буду рад, если смог быть вам полезен! 😏

Комментарии

Отправить комментарий