ЛУЧШИЕ ИНСТРУМЕНТЫ ДЛЯ СОЗДАНИЯ КНОПКИ ВВЕРХ НА САИТЕ WORD PRESS

Кнопки для плавной прокрутки вверх в Вордпресс

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

Сегодня я познакомлю вас с лучшими плагинами с помощью которых вы сможете установить кнопку Back to top (Scroll To Top) на свой сайт или блог. Плагины подобраны по наибольшему скачиванию модулей пользователями платформы WP. Напомню, все плагины можно установить стандартным способом, из админки, через поиск и загрузчик плагинов. Скачивать ни чего не надо. Установил, активировал, настроил и всё.

Простой плагин jQuery Smooth Scroll

Плагин jQuery Smooth Scroll

Модуль для плавной прокрутки обратно вверх. Данный плагин автоматически добавляет кнопку вверх (стрелка), после установки и активации модуля.  Кнопка вверх появится в правом нижнем углу сайта. Как говорится, установил и забыл.  Установили плагин уже более 50 700 раз. Все файлы CSS и JS сжимаются, чтобы получить высокий балл в Google Page Speed.

Легкий плагин Smooth Scroll Up — плавная прокрутка вверх

Плавная прокрутка вверх — это легкий плагин, который создает настраиваемую функцию наверх на вашем сайте WordPress. Плагин Smooth Scroll Up имеет минимальные настройки. Выберите из различных типов элементов прокрутки вверх — изображение, значок, текстовая ссылка т.д.

Плагин на русском языке, так, что проблем с настройками кнопки вверх у вас не возникнет. Кнопка вверх WordPress сделает ваш сайт более удобным для посетителей.

Плагин WPFront Scroll Top

Добавляем кнопку прокрутки вверх

Модуль WPFront Scroll Top позволяет посетителю легко прокручивать назад до верхней части страницы с полностью настраиваемыми параметрами и изображением. Данный плагин имеет больше настроек и главное, очень большой выбор иконок (изображений) самой кнопки.

Настройка плагина WPFront Scroll Top

Simple Scroll to Top Button

Кнопка Scroll to Top для ВордПресс

Простой в использовании, с интуитивно понятным интерфейсом, плагин WordPress, который дает вам возможность легко и безопасно добавить кнопку «Scroll to Top» на ваш сайт WordPress. Кнопка «Scroll to Top» появляется в правом нижнем углу веб-сайта, когда посетители прокручивают страницу.

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

Smooth Scroll Page Up/Down Buttons

Если одной стрелки вам мало, то можно установить две: вверх и вниз. Плагин Smooth Page Scroll Up / Down Buttons для WordPress добавляет кнопки на каждую страницу вашего сайта, которые можно использовать для плавной прокрутки вверх или вниз. Это может быть особенно удобно для страниц с большим количеством текста / контента. Есть станицы с настройками. Например, расположение Buttons, используйте любой из 4 шаблонов макета. Установите скорость, с которой страницы должны прокручиваться:

Экран настроек расположения Buttons

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

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

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

Для чего нужна кнопка «Вверх»

Кнопка «Вверх» – это отличный способ вернуть пользователя в начало веб-страницы. Такой функционал часто используется на длинных страницах, где скролить до начала страницы попросту неудобно.

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

Другая важная особенность кнопки прокрутки – это то, что она делает сайт удобным для поисковых систем, в частности Яндекса. Он ставит поведенческие факторы чуть ли не главным критерием при ранжировании. Таким образом, если вы обеспечите пользователю комфортное нахождение на сайте, то будет удобно не только ему, но и поисковым системам, которые станут относиться к вашему сайту более позитивно.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Какой должна быть кнопка «Наверх»

Вывод: кнопку «Вверх» лучше всего использовать в нижнем правом углу, она должна быть заметна и удобна, прокрутка должна быть плавной, не мгновенной.

Альтернативы кнопкам прокрутки

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

Лучшие плагины для создания кнопки «Наверх»

Для того чтобы добавить кнопку «Вверх» на сайт с WordPress, достаточно установить и активировать специальный плагин. Как правило, дополнительные настройки не требуются, но во многих инструментах можно кастомизировать кнопку под себя и вводить дополнительный функционал. Например, можно сделать так, чтобы кнопка появлялась в определенный момент через N пикселей.

О том, что это за плагины и каким функционалом они обладают, поговорим далее.

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

Smooth Scroll Up – это популярный и функциональный плагин, позволяющий легко поставить кнопку возвращения в начало страницы.

Данный плагин отлично подойдет тем, у кого нет времени самостоятельно придумывать дизайн кнопки «Наверх». Если вы просто хотите, что пользователям было проще читать и просматривать материалы, то WPFront Scroll Top – правильный выбор. Он включает в себя довольно обширную коллекцию различных иконок, которые подойдут по вкусу многим.

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

Ссылка на скачивание: Scroll Back To Top

Dynamic “To Top” Plugin

Dynamic “To Top” Plugin – еще один плагин, позволяющий легко и быстро добавить кнопку «Вверх». Кнопка отображается во всех браузерах с поддержкой JS и может быть отключена в мобильной версии.

Skysa Scroll-to-Top App

Skysa Scroll-to-Top App – плагин, который не похож на своих конкурентов. С его помощью можно не просто добавить кнопку «Вверх», но и воспользоваться инструментами для создания виджетов. Например, можно добавить плавающий блок с социальными сетями и элементами прокрутки страницы.

Стоимость: есть 15-дневный тестовый период

Ссылка на скачивание: Skysa Scroll-to-Top App

Простой в использовании плагин с интуитивно понятным интерфейсом, который позволяет легко и быстро добавить кнопку прокрутки «Наверх». Работает он, как и большинство других плагинов: кнопка появляется после того, как пользователь начинает прокручивать страницу.

To Top – еще один популярный плагин для добавления кнопки «Вверх». Как и предыдущие расширения, он предлагает несколько настроек для управления внешним видом и поведением кнопки прокрутки.

Simple Back To Top

Simple Back To Top – крайне простой плагин, который достаточно активировать, и кнопка тут же появится на сайте. Иконку кнопки можно изменить на свое изображение через настройки.

CRUDLab Scroll to Top

Последний плагин, о котором мы поговорим, – это CRUDLab Scroll to Top. Он позволяет использовать 15 различных дизайнов кнопки, которая может располагаться как справа, так и слева.

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

Для чего нужна данная кнопка и в каких случаях ее лучше всего использовать

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

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

Простая кнопка «Наверх» без JavaScript

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

Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:

Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.

Пример CSS кода:

— Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.

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

UItoTop JQuery плагин

Простой плагин делающий плавное появление кнопки и плавный скроллинг вверх при нажатии на ее. Чтобы задействовать плагин на своем сайте нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить все необходимые файлы плагина и он будет работать.

В представленном архиве находится 3 папки: css — файл стилей кнопки, img — изображение и папка js в которой находятся 4 JavaScript файла.

Подключение JavaScript файлов:

Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.

Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:

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

Не забудьте только изменить путь к файлу.

Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS  стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.

Кнопки прокрутки вверх и вниз на JQUERY

Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают. Этот эффект вы можете увидеть просмотрев демо.

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

Пути ведущие к JS файлам необходимо заменить на свои.

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

Далее следует подключение еще одного JS файла и код содержащий определенные функции, которые необходимо рассмотреть подробнее. Потому как про помощи их можно изменять некоторые параметры работы кнопок. Ниже приведен код с разъяснениями:

Для того, чтобы добавить CSS просто подключите к страницам сайта файл  style.css, находящийся в архиве с исходниками:

А самым лучшим вариантом будет скопировать стили этого файла и вставить их в файл стилей своего сайта.

Кнопка плавной прокрутки вверх при помощи JQuery

Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.

Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это: icon_top.png

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и  50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

Затем сразу после подключения библиотеки необходимо расположить следующий  код JQuery:

Первый ScrollTop — определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.

Как вы видите есть еще два параметра — 0 — значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 — это скорость анимации в миллисекундах.

Анимированная кнопка перехода вверх

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

Для создания кнопки используется изображение стрелки, CSS стили и JQuery.

Изображение стрелки использующееся для кнопки можете взять здесь:

Для вызова кнопки используется следующий HTML код:

При помощи CSS заданы отступы и внешний вид кнопки, добавлено свойство transition: для создания эффекта задержки при наведении курсора. Вставлять его лучше в CSS файл вашего сайта.

Расширения для Joomla и плагины для WordPress позволяющие создавать кнопку «Наверх».

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

Найти самые популярные плагины для создания такого функционала вы сможете по ссылке:  http://wordpress.org/plugins/tags/scroll-to-top

Кнопка вверх для сайта с плагином jQuery Smooth Scroll

Поклонникам простоты и скорости подойдет плагин кнопки jQuery Smooth Scroll ссылка на WordPress.org. Установить можно из админки, изображение модуля выглядит так.

Дальнейших настроек не требуется, поставил и кнопка вверх для сайта появится автоматически. Отсутствие настроек считаю плюсом, внешний вид могу настроить сам. Так прокрутка выглядит на блоге, маленькая размер – для слабовидящих будет проблемой.

Пойдем от простого к сложному, Simple Back To Top имеет одну функцию – изменять значок кнопки вверх. Ставится так же из панели WordPress стандартным поиском.

Выбор стрелки сзображением

Если картинка будет круглая, то обязательно делайте с прозрачным фоном в формате PNG.

Решение типа все включено, плагин WPFront Scroll Top имеет множество настроек и гибкость в выводе кнопки наверх. На скриншоте только часть панели WPFront.

Создаем back to top без плагина

Без плагина кнопку на верх сделать не сложно, стоит придерживаться инструкции. Мы написали код, сейчас разберем его составляющие. Разделим конфигурацию на три кода, первый – тег button. Внутри тега атрибут class и текст, выводимый на блоге. Вставляем в файл темы WordPress на то место, где хотим его видеть, например, правый нижний угол, тогда записываем код в файл footer активной темы перед закрывающим тегом body.

Вставка в footer

Следующая запись это JS код, вставляем так же перед закрывающим тегом body, все скрипты должны располагаться в подвале сайта. Не забываем нажать Обновить.

javascript в подвале

Третий код это CSS стили, подобрали нейтральный синий цвет. Вставляем в файл style.css активной темы WordPress.

Вставка стилей в style.css

Если сделали по инструкции, то на сайте появится кнопка с надписью наверх.

Оцените статью
NaWordpress.ru
Добавить комментарий