Как вам помочь ?

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

Статья актуальна для версии магазина: 10.0 | 8.5

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

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

Навигационная стрелка - 5298
Рисунок 1.

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

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

 

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

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

Навигационная стрелка - 2611
Рисунок 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).

Навигационная стрелка - 7316
Рисунок 3.

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

Навигационная стрелка - 2539
Рисунок 4.

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

Навигационная стрелка - 7499
Рисунок 5.

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

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

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

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: навигация, стрелка вверх, прокрутка вверх, стрелка, навигационная стрелка, прокрутка, боковая стрелка

Мы используем cookies. Подробнее...