Удобная кнопка наверх для сайта на cms wordpress

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

Зачем нужна кнопка наверх для сайта

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

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

Smooth Scroll Up

Плагин позволяет добавить кнопку в четырех вариантах

• изображение 
• текст ссылки 
• таблетка 
• вкладка  

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

/* Image style */
a.scrollup-image {
 background-image: url("../img/scrollup.png");
 bottom: 20px;
 right: 20px;
 width: 300px;
 height: 38px;
 background-size: 38px 38px;
 background-repeat: no-repeat;
}

/* Tab style */
a.scrollup-tab {
 zIndex: 9999999;
 bottom: -10px;
 width: 70px;
 height: 70px;
 padding: 10px 5px;
 font-family: sans-serif;
 font-size: 14px;
 line-height: 20px;
 text-align: center;
 text-decoration: none;
 text-shadow: 0 1px 0 #fff;
 color: #828282;
 -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
 box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.2);
 background-color: #E6E6E6;
 background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBEBEB), to(#DEDEDE));
 background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);
 background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);
 background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);
 background-repeat: repeat-x;
 -webkit-transition: bottom 150ms linear;
 -moz-transition: bottom 150ms linear;
 transition: bottom 150ms linear;
}

a.scrollup-tab:hover {
 bottom: 0px;
}

/* Pill style */
a.scrollup-pill {
 zIndex: 9999999;
 bottom: 20px;
 background: #555;
 color: #fff;
 font-size: 12px;
 font-family: sans-serif;
 text-decoration: none;
 opacity: .9;
 padding: 10px 20px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-transition: background 200ms linear;
 -moz-transition: background 200ms linear;
 transition: background 200ms linear;
}

a.scrollup-pill:hover {
 background: #000;
 color: #fff;
}

/* Text link style */
a.scrollup-link {
 bottom: 20px;
 zIndex: 9999999;
}

/* Center style */
a.scrollup-center {left: 47%;}

/* Right style */
a.scrollup-right {right: 20px;}

/* Left style */
a.scrollup-left {left: 20px;}

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

Scroll To Top

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

 Настроек минимум. Поменять можно текст, ширину, цвет текста и цвет фона кнопки.

Пользуйтесь описанными плагинами и кнопка наверх для читателей вашего сайта станет очередной удобной фишкой. Они будут вам благодарны. Честное пионерское! Зуб даю!