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

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

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

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

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


Рисунок 1.

Итак, данная стрелка появляется, если пользователь прокрутил (спустился) вниз сайт, начинается показ стрелки с половины страницы сайта по высоте (рис.2), соответственно если не дошли до половины страницы сайта, стрелки не будет (рис.3).


Рисунок 2.


Рисунок 3.

На рис 2 и 3 видно, что после новинки стрелки нет, но чуть спуститься, стрелка появилась.

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


Рисунок 4.

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

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


Рисунок 5.

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

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

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

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

Размещаем код в панели администрирования пункт меню "Каналы продаж - Интернет-магазин - Параметры магазина", вкладка "CSS" и в окне редактора сохраняем настройки (рис. 6).


Рисунок 6.

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


Рисунок 7.

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


Рисунок 8.

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

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

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

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

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

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

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

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

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

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