Кнопка вверх как вконтакте

Кнопка вверх не только интересный элемент дизайна, но и важный момент юзабилити! Недавно я решил сделать кнопку вверх, но хотел именно как Вконтакте. В сети ничего не смог найти и решил экспериментировать сам. Готовый вариант кнопки вверх как Вконтакте, вы можете наблюдать на этом блоге в левой части экрана (моя гордость!). Сегодня я поделюсь с вами результатами своего эксперимента и вы сможете сделать у себя на блоге такую же кнопку!

 

Итак, для создания кнопки вверх на сайте WordPress нам понадобится 1 плагин и немного исправлений в CSS стилях. А теперь ближе к теме и поехали.

1. Плагин, который нам нужен, называется Scroll to Top Button, его вы можете установить через стандартный установщик Вордпресса. Устанавливаем, в настройках все оставляем стандартно.

2. Теперь когда мы установили плагин, нам нужно его подогнать по CSS стилям, чтобы он выглядел как Вконтакте.

Буду рад видеть среди моих подписчиков!

  • Телега Весь движ здесь! Палево доходов, темки, кейсы! Присоединяйся!
  • Инстаграм жизнь вебмастера, много кейсов, годнота в сторис. Все намереваюсь оживить этот инст!
  • ВКонтакте большое комьюнити вебмастеров в ВК

Для этого, нам нужно зайти в файл CSS плагина, через FTP или через файловый менеджер вашего хостера и открываем файл style.css, он находится по адресу /ВАШ_САЙТ.РУ/public_html/wp-content/plugins/scroll-to-top-button/assets/css.

Вот как должен выглядеть стиль .scroll-top-inner (просто замените имеющийся у вас код, начиная с .scroll-top-inner и до закрывающей скобки })

Стили для кнопки вверх как Вконтакте

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

Для тех, кто немного понимает в CSS, можно код и поднастроить под себя:

1. width: 5% – ширина кнопки “вверх”, занимает 5% от страницы.
2. height: 100% – высота кнопки “вверх” на всю высоту страницы.
3. left: 0 – обозначает, что кнопка будет пришита к левому краю вплотную, по умолчанию стоит right – то есть прижата вправо.
4. opacity: 0.15 – прозрачность кнопки. Чем выше значение, тем меньше прозрачность.

Это основное. С остальным экспериментируйте. Но в общем-то в таком виде кнопка вверх как Вконтакте и будет выглядеть. При этом она обеспечивает плавную прокрутку и радует глаз!

Вот что получилось у меня. Сделал все по написанной мною выше инструкции.

Кнопка вверх
Кнопка вверх настройки по умолчанию
Кнопка вверх как вконтакте
Кнопка вверх как Вконтакте

Надеюсь, что урок “Как сделать кнопку вверх как Вконтакте на вордпресс” получился простым и доступным. Сам не люблю много копаться в коде, но в данном случае, без этого не обойтись, придется немного повозиться. Удачи!

Если есть какие-то вопросы – с радостью отвечу в комментариях.

p.s. Честно, как от сердца отрываю! Уж такая красивая кнопочка получилась! Пользуйтесь с удовольствием!

p.s.p.s. Если в благодарность потыкаете по кнопочкам соц сетей, буду признателен!

Буду рад видеть среди моих подписчиков!

  • Телега Весь движ здесь! Палево доходов, темки, кейсы! Присоединяйся!
  • Инстаграм жизнь вебмастера, много кейсов, годнота в сторис. Все намереваюсь оживить этот инст!
  • ВКонтакте большое комьюнити вебмастеров в ВК

Подпишись на Пасажира, будет интересно!

Понравилась статья? Поделиться с друзьями:
PASAGIR.RU | Блог о создании пассивного дохода
Комментариев: 69
  1. Александр

    Слушай, ну я сделал…Круто, скажи, а как надпись “НАВЕРХ” поставить вверху?

    1. pasagir (автор)

      Да, отлично смотрится. Тебе можно больше 5% ширину поставить, мне кажется.
      Чтобы вставить надпись “НАВЕРХ”
      1. В папке плагина в файле по адресу /ВАШ_САЙТ.РУ/public_html/wp-content/plugins/scroll-to-top-button/assets/js
      Заходим и сразу после ˄ дописываем НАВЕРХ.
      2. Чтобы надпись не была такой огромной, надо подправить размер шрифта, для этого все в том же файле style.css в .scroll-top-inner span {
      изменяем значение строчки на такое font-size: 15px; если не подходит, можно подобрать методом научного тыка ;)

      1. Александр

        В этом файле – scroll-to-top.js? Если да, то не нашел такого знака ^ ?

      2. Александр

        Понял, но у меня нет такого знака…Можешь сам глянуть, просто полоса…Скажи, в какой строчке?

        1. pasagir (автор)

          Там должно быть &#_708; только без “_”

          1. Александр

            Где там? Если в папке, то там только один файл scroll-to-top.js…

            Если в этом файле, то нет такого символа..Я понял о чем ты, но не могу найти

        2. pasagir (автор)

          Я бы еще у тебя сделал так:
          border: 0px solid #FFFFFF;
          opacity: 0.25;
          Без границы и немного потемнее. Мне кажется так лучше будет смотреться.

        3. pasagir (автор)

          Хм..а я у тебя уже вижу гигантскую надпись Наверх! :) Я тебе щас на почту напишу, там разберемся.

      3. Александр

        Все…Сделал, ай да я молодец…А как чуть ниже надпись сделать?

        в css какая строчка позиции?

        1. pasagir (автор)

          .scroll-top-inner
          line-height:

  2. Александр

    Уже усе готово…И сделал так:

    border: 0px solid #FFFFFF;
    opacity: 0.25;

    Че скажешь? Нормульно?

    1. pasagir (автор)

      border осталась 1..или у меня крепко закешировалось или ты не сохранил.
      А так, здорово. Тебе эта кнопка вообще в тему ;)
      В следующий раз, если много вопросов – давай по E-mail решим, так удобней ;)

      1. Александр

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

        Бордер убрал :)

        1. pasagir (автор)

          Во! Теперь вообще супер! :!:

  3. Евгений

    Привет, я что то проспал? Кнопка прикольная но у меня не впишется в дизайн по моему. Это получается сайт в право смещается что ли ну или полоса слева идёт, а без полосы можно сделать или нет? А ну вон и у Сани фотографа тоже полоса. Хотя можно замутить у себя позже, ща времени нет.

    1. Александр

      Ахахаха))привет)))плагин просто установи и активируй и будет у тебя обычная кнопка справа…

      Ничего не сдвигается, просто по верх встает)))вообще круто, под любой дизайн, непринужденно))

    2. pasagir (автор)

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

      1. Евгений

        Ага поставил плагин, кнопу саму потом доработаю, посимпатичнее что нибудь сделаю.

        1. Евгений

          Да хотя и эта ни чего.

          1. pasagir (автор)

            Во! Главное работает! ;)

  4. Александр

    Ну не знаю.. По мне, так удобней было бы, если бы эта кнопка была справа. Многие люди пользуются этим бегунком справа, чтобы переместиться на верх. Тут потянулись бы к галочке на бегунке и увидели надпись “Наверх”.
    А плагин Scroll to Top Button сейчас установлю. Давно надо было.
    Или попробую другой найти, который внизу посередине такую прямоугольную делает кнопочку. Был у меня такой.
    Не помнишь, как называется?

    1. pasagir (автор)

      Мне удобно и привычно видеть эту полосу слева, потому что Вконтакте точно такая же полоса, а я там частый гость. Думаю, у многих тоже ассоциация с Вконтакте есть.
      По поводу других плагинов – достаточно ввести в поиске плагинов Scroll to Top, как выйдет несколько десятков вариантов..но лично мне нравится этот плагин, он легкий, CSS легко настраивается. По идее и его можно поставить посередине внизу.

  5. Леонид

    можно еще добавить псевдо класс hover. как то так(могу ошибаться)
    .scroll-top-inner:hover{opacity:1;}
    и при наведении будет увеличиваться яркость полосы

    1. pasagir (автор)

      Да, спасибо, в тему, я тоже об этом думал. Но пока никак не доходят руки..

  6. surzis

    Очень интересно! Спасибо! Попробую себе “прикрутить”.

    1. pasagir (автор)

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

  7. Сергей

    Твою кнопку практически невидно. Да еще с правой стороны, совсем неудобно.
    Лично я такие кнопки не устанавливал и устанавливать не буду. Вот пошла такая мода на эти кнопки. Не, лишние коды и плагины ради этого? Я так никогда такими кнопками не пользовался. Есть же справа ползунок! Мне как-то им привычнее.

    1. pasagir (автор)

      А мне удобно такими кнопками пользоваться. Всегда юзаю. Кстати движок этот плагин почти не нагружает.
      Но тут, как говорится, каждому свое. Я вот бегунков никогда не пользуюсь..Всегда колесиком кручу.

  8. Александр

    Артем, вот еще вопрос появился…А как реализовать, чтобы была возможность вернуться вниз…ВКонтакте же если поднять в начало, то можно и вернуться на то место, откуда поднялись вверх…

    P.S. Сорри за тавтологию :)

    1. pasagir (автор)

      Да, я тебя понял.
      Если честно, затрудняюсь ответить на этот вопрос. Это уже не вопрос CSS, это программный момент. Здесь либо нужно править код плагина, либо просто брать другой плагин, где уже реализована данная функция. Плагинов Scroll to Top много разных..

      1. Александр

        Ну понятно. Спасибо. Я спросил на тот момент, что вдруг ты знаешь какой код править нужно :)

  9. Сергей

    а где этот плагин скачать Scroll to Top Button? все плагины которые я находил с таким названием не имели файла style.css не могли бы вы дать ссылку

    1. pasagir (автор)

      Он ищется через встроенный поиск WordPress. “Найти плагин” –> Scroll to Top Button, версия: 1.0, Автор: Rene Puchinger, рейтинг 5 звезд.

      1. Сергей

        Мне почему та не пришло письмо на Email то что вы ответили, все спасибо я нашел этот плагин,встроенным поискам вообще не пользовался не когда)

        1. pasagir (автор)

          Странно. Ну, главное, что все нашлось ;)

          1. Сергей

            ну))

  10. Евгений

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

    1. pasagir (автор)

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

  11. Белый Манимейкер

    Я бы советовал все если и юзать такую кнопку, то только от яндекса. Там намного исмпотнее выглядит и все-таки яшкина…

    1. pasagir (автор)

      Ну тут вопрос вкуса. Мне нравится такая кнопка больше, чем Яшина..

  12. Дмитрий

    помогите с этой кнопкой, где сделать надпись Наверх? желательно без “^” просто “Наверх” в файле scroll-to-top.js нашел &#708 а дальше что вместо “&#708” прописать Наверх? или как? :)

    1. pasagir (автор)

      Именно. Вместо &#708 пишем то, что вы хотите видеть ;)
      p.s. перед любыми манипуляциями в коде – скопируйте и сохраните исходный код!

      1. Дмитрий

        У меня нету стрелочки ^ поэтому не понимаю что удалить и что написать, я в этом деле чайник :)

        1. pasagir (автор)

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

          1. Дмитрий

            Да вы правы из под админки ее не видно, когда захожу на сайт то вижу эту стрелочку ^ но по пути /ВАШ_САЙТ.РУ/public_html/wp-content/plugins/scroll-to-top-button/assets/js в коде такой стрелочки нету, через ctrl+F прописываю найти ^ но он ее не находит поэтому и спрашиваю что в этом файле в коде нужно дописать, если нужно вместо &#_708; прописать ^Наверх, то изменений не происходит, остается только та же стрелочка, плагин ставил который вы описали в статье. попробую еще поковыряться))

          2. Дмитрий

            Заранее огромное спасибо за помощь, вроде как получилось, кнопку вижу и надпись тоже вот код какой получился (scrollTopParams.size == ‘small’ ? ‘small’ : ”) +’ “>Click UP’); если вместо Click UP написать по русски Наверх, то получаются иероглифы в виде вопросительного знака, как заставить код видеть русский язык?)

          3. pasagir (автор)

            Не видя “пациента”, не могу ничего сказать. Но, возможно изменения происходят, а у вас просто закешировалась страница. Попробуйте заменить &#_708; (без нижнего подчеркивания) на НАВЕРХ и обновить страницу через Ctrl+F5.

          4. Дмитрий

            Связался с вами через форму обратной связи, буду признателен за вашу помощь в моем вопросе

  13. denprox

    Скорее всего не поможете, но все таки ) Как то можно сделать, чтобы ширина кнопки подстраивалась под разрешение экрана ?)

    1. pasagir (автор)

      Видел на одном блоге такое..но если честно, не заморачивался. Вообще я за основу брал кнопку вверх Вконтакте. Так что, там можно покапаться в стилях и найти много интересного ))
      Рекомендую использовать Firebug на мозиле и хроме.

  14. Vlad

    Привет!

    А зачем так все усложнять?

    Когда я писал про скрипты стрелок, стрелка вк устанавливалась небольшим скриптом…

    Зачем плагин?

    1. pasagir (автор)

      Плагин, потому что до этого метода я сам дошел, а с кодингом у меня не густо. Поэтому, что что можно решить скриптом, я решил плагином. Это не критично. Нагрузки от него почти нет.

  15. Еван

    Спасибо огромное! В нашу тему встала как влитая. С прозрачностью поигратся стоит только.

    1. pasagir (автор)

      Рад помочь. И правда смотрится отлично! Приятно и не навязчиво.

  16. Игорь

    Большое человеческое и просто огромное спасибо! :smile: Как же я удачно к тебе на огонек заглянул. А то все перерыл – ничего путного. Плюс ко всему ты все подробно так объясняешь, за что отдельная благодарность – так держать и дальше! ;-)

    1. pasagir (автор)

      Спасибо!
      Кнопка, кстати, очень вписалась в твой диз.
      Всегда рад видеть в гостях ;)

  17. Игорь

    Единственное, очень хотелось бы сделать как у тебя – при наведении мышки полоска затемняется сильнее. Я не большой знаток CSS, потому не сообразил как это сделать. Не подскажешь?

    1. pasagir (автор)

      В CSS такое добавь в конце.

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

      1. Игорь

        В очередной раз большое спасибо!)) То, что доктор и прописал :smile:

        1. pasagir (автор)

          Рад что все получилось ;)

  18. Илья

    Артём реально шарит. Быстро разбирается с проблемой. Отличный человек!!! Быстро отвечает на письма.

    1. pasagir (автор)

      Спасибо, Илья. Удачи с проектом ;)

  19. Виталий

    Cпасибо, очень помог! ;-)

    1. pasagir (автор)

      Рад, что помог! На сайте хорошо кнопка эта смотрится ;)

      1. Виталий

        Ага, как раз под цветовую гамму )))

  20. livon

    У меня кирилицу в надписи наверх не понимает. не знаю прям что делать

    1. pasagir (автор)

      Оставь только стрелку, как вариант.

  21. Миша

    Не могу сделать не получается ни как, не могу даже найти scroll-top-inner

    1. pasagir (автор)

      Искать надо плагин Scroll to Top Button, а scroll-top-inner – это стиль.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: