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

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

Для того чтобы не заморачиваться есть простое как всегда решение для движка wordpress. Это кнопка наверх для сайта wordpress плагин back to top. Как  устанавливать плагины я рассказывать не буду. Для этого у меня есть специальный видео урок, которые находятся по ссылке https://www.youtube.com/watch?v=IIzI4dgFARg

Только расскажу немного по настройке этого плагина:

Настроить плагин очень легко. После того как вы его активировали в списке плагинов, в левом главном меню админки у вас появится подраздел «Back to Top»:

1

 

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

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

Выбираем первый вариант и нажимаем «Next…»

Далее из списка предложенных картинок выбираем ту которая большего всего вам понравилась, или которая больше всего подходит под ваш дизайн (например вот эту):

3

После чего сохраняем полученный результат нажатием на кнопку «Сохранить изменения».

Далее выбираем второй подпункт:6И видим следующую страницу на которой можно выбрать эффект появления вашей кнопочки, или настроить css стили. первое настроим эффект появления:4Тут вам предлагается 3 варианта, если чесно самый первый самый красивый как мне кажется, но на самом деле тут на любителя. Первый это просто появление из ниоткуда, второе это появление снизу окна, и третий в переводе на русский означает: спрятаться/появиться, но на самом деле, если вы выбирате 3-тий вариант то кнопочка выскакивает из угла страницы.

Что касается настройки css стилей, то скажу сразу сложного ничего в этом нету, но если не знаете о чем речь лучше не трогать:5 Итак нам предлагается 2 окна, в первом окне отображаются стили кнопочки которая уже появилась на сайте но мышкой на нее никто не навел, во втором окне которое справа настраивается стиль кнопочки на которую навели мышкой. То есть я думаю понятно, что если вы что то меняете, то меняйте сразу в 2-ух окошках. Ну а вообще hover (при наведении) принимает значение обычного стиля если не задано никакое значение. То есть если вы зададите bottom: 25px, то достаточно его удалить в правом окне и оно само примет значение 25. И не нужно следить за каждым изменением.

Я думаю что сложностей с установкой кнопочки не возникнет, это очень просто урок и простой в использовании плагин.

Спасибо за внимание. С Ув. Антон Саблев