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

 


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

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

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

wpfront scroll top

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

wpfront scroll top меню

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

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

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

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

включить

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

wpfront scroll top сохранить

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

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

JavaScript Async:

javascript async

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

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

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

скроллирование

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скрывать:

скрывать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ширина окна браузера

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

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

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

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

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

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

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

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

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

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

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

стиль кнопки

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

альтернативное название

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

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

текст кнопки

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

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

font awesome

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

свои css стили

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

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

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

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

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

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

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

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

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

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

Блок Фильтр

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

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

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

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

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

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

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

Делитесь полезной информацией с друзьями:

Рекомендую:

Книга «Wordpress для начинающих» Дэрил Бартлетт Книга «Wordpress для начинающих» Дэрил Бартлетт
Книга «Создание веб-сайта для чайников» Дэвид Кроудер Книга «Создание веб-сайта для чайников» Дэвид Кроудер

Сергей

Привет! Моё имя Сергей, и я — автор этого блога. Рад, что вас заинтересовал мой проект. Не забывайте оставлять комментарии к статьям. По всем другим вопросам обращайтесь через контактную форму на странице "Контакты".

Читайте также:

комментария 2

  1. Игорь:

    Сейчас редко встретишь сайты с кнопкой UP. Но для блогов с длинными статями очень полезно.

    • Сергей:

      Добрый вечер, Игорь. Согласен с Вами. В любом случае плагин очень легкий.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


1 + 3 =


Вверх