Навигационная стрелка

В статье рассмотрим как работает прокрутка сайта (стрелка слева) (рис. 1).

Данная навигационная стрелка помогает быстро перейти в начало страницы сайта.

Рисунок 1.

Данная стрелка появляется, если пользователь прокрутил сайт хотя бы до середины страницы.

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

Изменение внешнего вида стрелки

Если планируете поменять цвет стрелки, либо загрузить свою картинку, то это можно сделать следующим образом:
Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили иконки корзины (рис. 2).

Рисунок 2.

Кнопке соответствует класс .to-top-icon.

Код для изменения стилей будет выглядеть следующим образом:

.to-top-icon
{
background: url(strelka.png) no-repeat;
background-size: cover;
}
.to-top-icon:before
{
content: "";
}

Где strelka.png - это название вашей иконки. Её нужно предварительно загрузить на сайт. Подробнее о том, как загрузить изображение на сайт, можно ознакомиться в инструкции. Рекомендуемый размер иконки - 40x40px.

Размещаем код в панели администрирования: пункт меню "Мои сайты" - "Редактировать" - вкладка "Параметры", раздел "CSS" и в окне редактора сохраняем настройки (рис. 3).

Рисунок 3.

Результат применения стилей (рис. 4).

Рисунок 4.

Аналогично можно изменить цвет существующей стрелки и сделать ее больше (рис. 5).

Рисунок 5.

Код для изменения цвета и размера с рис. 5 будет выглядеть следующим образом:

.scroll-to-top .cs-t-1
{
color: #DC143C;
font-size: 30px;
}

Готово, мы рассмотрели, что такое навигационная стрелка и как ее изменить.