Плагины прокрутки страницы вверх

Приветствую вас, дорогие мои читатели!

Как вы могли наблюдать, шаг за шагом, с каждой новой статьей мой блог изменяется. И, надеюсь, ни я один считаю, что эти изменения – в лучшую сторону. Вот вчерашнее изменение цвета ссылок очень позитивно изменило внешний вид блога, его восприятие, и даже, в Live Writer писать статьи мне стало гораздо приятней и веселей.

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

Речь пойдет о добавлении функционала прокрутки страницы вверх.

Как всегда, я буду все делать в режиме “онлайн” и сразу фиксировать информацию для вас.

Как вы прокручиваете страницу вверх?

1. Колесиком скроллинга на мышке?

2. С помощью скроллбара справа?

3. Нажимаете Ctrl+Home на клавиатуре?

Первый вариант с колесиком скроллинга для длинной статьи может потребовать от 5 “подходов” (вращений колесика). Второй вариант – с “тяганием” скроллбара, тоже не слишком удобный и быстрый, может не хватить места на столе и потребуется перехват ползунка. Третий вариант требует переноса руки с мышки на клавиатуру.

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

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

Вот предлагаю краткий обзор плагинов серии “scroll to top”, которые я нашел и попробовал.

1. WP Scroll To Top

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

Стрелка как-то неуклюже появляется из угла страницы. Прокрутка вверх – мгновенная (не плавная).

Этот плагин однозначно удаляю. Не рекомендую.

2. Scroll to Top

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

Вот такая область появляется внизу по середине странице.

Перемещение вверх страницы не мгновенное.

Плагин неплохой, но я запланировал размещение области для клика или стрелки справа. Тут только по центру и изменить в настройках это нельзя.

Смотрим дальше.

3. X-Scroll To Top – Responsive

Дальше – лучше! В этом плагине уже есть возможность настроить расположение стрелки. Расстояние указывается в процентах, правда, почему-то от правого края.

Scroll position: 0% – справа, 50% – по центру, 100% – слева.

Так же можно задать цвет стрелки, цвет фона, размер иконки.

Неплохой вариант плагина – беру его на заметку.

Пока деактивирую его и посмотрим еще что есть интересного.

4. sr-scroll-to-top-wp

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

Иконка изначально некрасивая – красная стрелочка на сером прямоугольнике с закругленными углами, вот “полюбуйтесь”. =)

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

sr-scroll-to-top-wp тоже не рекомендую.

5. jcwp scroll to top

Вот это уже серьезная работа! Первый плагин, в котором можно настроить, наверное, все, что нужно.

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

Стоит обратить внимание, особенно любителям понастраивать.

На этом я закончу рассматривать плагины прокрутки страницы вверх. Тут уже есть из чего выбрать. Лично я пока остановлюсь на варианте 3: X-Scroll To Top – Responsive. Все достаточно просто и эффективно.

Если вам тоже понравился плагин X-Scroll To Top и вы решите его использовать на своем сайте, то обращаю внимание, что в папке плагина есть три ненужных файла screenshot-1.png, screenshot-2.png, screenshot-3.png. Занимают они вместе более 300Кб, так что для экономии места рекомендую их удалить.

Если же X-Scroll покажется вам слишком простым и вы захотите чего-то большего, то посмотрите в сторону варианта 5 – jcwp scroll to top.

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

Конечно же можно обойтись и без плагинов. Возможно, как-то напишу и по этому поводу.

Жду ваших комментариев. Обязательно напишите какой плагин используете вы.

Пока-пока!