Кнопка вверх или как поднять контент

 

---

Всем привет! Сегодня разберём что из себя представляет кнопка вверх. Также мы научимся настраивать внешний вид кнопки, её позиционирование и прочие моменты. Кнопка вверх будет реализована с помощью плагина WPFront Scroll Top. Возможно вам будет интересна тематическая статья «Скроллинг».

Установка плагина

Сперва установим и активируем плагин WPFront Scroll Top:

Далее, нам следует в админке навести курсор мыши на «Настройки» и кликнуть по «Scroll Top» :

После этого загрузится страница с настройками кнопки вверх.

к оглавлению ↑

Блок «Отображение»

По умолчанию кнопка вверх неактивна. Чтобы её активировать нужно поставить галку, в опции «Отображение», напротив «Включить»:

Затем в конце страницы настроек кликните по «Сохранить изменения»:

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

к оглавлению ↑

JavaScript Async:

Данная опция отвечает за асинхронный тип загрузки кода кнопки вверх. Рекомендую включить. А в случае конфликта с другими плагинами, можете отключить.

к оглавлению ↑

Скроллирование:

Это настройка задаёт минимальное число пикселей, после скроллирования которого появится кнопка вверх.

к оглавлению ↑

Размер кнопки:

Принудительное форматирование размеров кнопки задаётся в этой опции. Например, вы указали в опции «URL своей картинки» ссылку на собственную кнопку вверх, то нелишним будет указать и её размеры.

к оглавлению ↑

Прозрачность кнопки:

Если вам нужна прозрачность кнопки, то этот параметр можно задать от 0 до 100 процентов, где 100 — это полная непрозрачность.

Исчезновение кнопки:

Вы можете задать плавность исчезновение кнопки вверх. Опция имеет значение в миллисекундах.

к оглавлению ↑

Скорость скролла:

Здесь вы можете принудительно задать скорость перелистывания в начало страницы после нажатия на кнопку вверх.

к оглавлению ↑

Скрывать:

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

Скрывать после:

Эта опция работает только при включённой предыдущей опции «Скрывать». Здесь можно задать время, через которое кнопка вверх исчезнет.

к оглавлению ↑

Скрывать на маленьких устройствах:

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

к оглавлению ↑

Ширина маленьких устройств:

Эта опции работает в связке с предыдущей «Скрывать на маленьких устройствах». Задайте минимальный размер ширины экрана мобильного девайся, при котором начнёт отображаться кнопка вверх.

к оглавлению ↑

Скрывать при маленьком окне браузера:

Вы можете отключить отображение кнопки вверх при небольшом размере окна браузера.

к оглавлению ↑

Ширина окна браузера:

Здесь задаётся та самая ширина окна браузера. В том случае, если фактический размер окна будет меньше заданного в этой опции, то кнопка вверх не будет отображаться.

к оглавлению ↑

Скрывать в админке:

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

к оглавлению ↑

Скрывать во фреймах:

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

к оглавлению ↑

Стиль кнопки:

Здесь вы можете задать стиль кнопки из трёх доступных: картинка, текст и Font Awesome. Касательно картинки, то вы можете в конце страницы настроек выбрать уже готовый вариант или указать ссылку на своё изображение:

Также в настройках картинки можно дополнительно указать альтернативное название.

Если вам нужен просто текст, то для него существует отдельный блок настроек, который сменит блок доступных картинок на настройки текста, после активации поля «Текст»:

В настройках текста можно выбрать: цвет текста, цвет фона и цвет кнопки под курсором мыши.

А о Font Awesome думаю говорить лишнее. Но всё же, кто не знает, то существует одноимённая библиотека иконок, которая часто используется дизайнерами. Так вот, при желании можно использовать любую доступную иконку для копки вверх. После выбора Font Awesome, в конце страницы, активируются соответствующие настройки:

Также обратите внимание, что в режиме «Текст» и «Font Awesome» доступно поле «Свои CSS стили»:

к оглавлению ↑

Блок расположение

В этом блоке настроек задаётся расположение кнопки вверх. Итак, рассмотрим опции поближе.

Расположение:

Здесь можно выбрать месторасположение кнопки вверх. Доступно четыре расположение по углам.

Отступ по горизонтали и по вертикали:

Если вам нужен отступ по вертикали или горизонтали, то задайте значение в положительном или отрицательном значении. Например, значение с минусом по горизонтали сместит кнопку вправо. А по вертикали — вниз.

к оглавлению ↑

Блок Фильтр

Эта группа настроек предназначена для включения и отключения кнопки вверх на определённых страницах.

Выводить на страницах:

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

В поле «Включить на следующих страницах» можно указать только те страницы, на которых кнопка вверх будет активна.

В поле «Исключить на следующих страницах» можно исключить станицы для показа кнопки. А если в разрешающем или исключающем списке нет нужной страницы, то добавьте в поле для ввода через запятую ID страницы или поста.

На этом всё. Спасибо за внимание. Если что-то непонятно, то задавайте вопросы в комментариях. Касательно Font Awesome, чтобы иметь возможность вставить ссылку на иконку, вам нужно активировать минимум стандартную подписку. Для молодых и не прибыльных сайтов нет смысла этого делать. Просто на будущее знайте, что существует возможность вставить иконку Font Awesome с помощью плагина WPFront Scroll Top.