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

Здравствуй дорогой читатель блога disgorge-mex.com. Мы столько времени проводим в социальных сетях, что функционал и интерфейс многих из «зубров«, врезается в память. Я, например, уже привык кликать в левую часть экрана, чтобы прокрутить страницу вверх. Вспомнили сразу? Да, я говорю о Вконтакте. Хотите такой же функционал у себя на сайте? Если у вас сайт на WordPress, то читайте, ниже о том, как сделать кнопку вверх как Вконтакте.

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

Как сделать кнопку вверх как вконтакте

И как всегда нас выручит плагин для WordPress. На этот раз будем использовать Scroll to Top Button. Устанавливаем его стандартным способом, через установщик WordPress. Сразу же активируем плагин и перейдя на сайт видим такую картинку

плагин Scroll to Top Button

Чуть прокрутив страницу вниз, появляется кнопку для прокрутки вверх. Но это же все стандартно, а нам нужно кнопка как Вконтакте.
Для этого придется немного поковырять код плагина. Поверьте, это сделает даже ребенок. И так!

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

Заходим через ftp или файловый менеджер хостинг провайдера, на сайт. И первым делом изменим стиль кнопки. Открываем для редактирования файл style.css который находится по пути wp-content/plugins/scroll-to-top-button/assets/css и находим строчку .scroll-top-inner {
Меняем этот блок на

.scroll-top-inner {
z-index: 9999;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
opacity: 0.10;
width: 5%;
height: 100%;
display: inline;
position: fixed;
cursor: pointer;
margin: 0 auto;
left: 0px;
bottom: 7px;
background: #000;
border: 1px solid #fff;

Ищем .scroll-top-inner span {
И изменим строку font-size: 35px; на font-size: 15px; А то надпись Вверх будет очень большая.

Для тех, кто не знает, поясню терминологию
width: 5% — ширина кнопки «вверх», в данном случае занимает 5% от всей страницы.
height: 100% — соответственно высота кнопки «вверх».
left: 0 — прижимаем кнопку к левому краю экрана.
opacity: 0.10 — прозрачность кнопки «вверх». Выше значение — меньше прозрачность.

Сохраняем файл и обновив страницу видим появившуюся серую полоску слева экрана. Теперь напишем в ней слово «Вверх» или «Наверх«. Кому как нравится 🙂

Для этого откроем для редактирования файл wp-content/plugins/scroll-to-top-button/assets/js/scroll-to-top.js
И допишем в него слово Вверх сразу после знаков ˄

У меня получилось так

(scrollTopParams.size == 'small' ? 'small' : '') +' ">&#708;Наверх</span></div></div>');

Сохраняем и обновляем страницу. Все!

кнопка вверх как у сайта вконтакте

Кнопка «вверх» как вконтакте готова.

Если хотите изменить прозрачность кнопки при наведении на нее курсора, то в файл стиля кнопки wp-content/plugins/scroll-to-top-button/assets/css/style.css допишите правило

.scroll-top-inner:hover {
opacity: 0.20;
}

Изменив параметр opacity на своё значение.
Вот мы и сделали кнопку вверх, как вконтакте. Как видите, с помощью плагина Scroll to Top Button это оказалось не трудно.

На этом все. Удачи в создании сайтов и заработке на них в интернете!

Понравилась статья — поделитесь ею в социальных сетях с друзьями
Подписаться на НОВЫЕ статьи!
Введите Ваш e-mail, чтобы знать куда отправлять Вам новости блога

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