PASAGIR.RU | Блог о создании… > Сайты > Кнопка вверх как вконтакте

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

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

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

 

Итак, для создания кнопки вверх на сайте 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. Если в благодарность потыкаете по кнопочкам соц сетей, буду признателен!

Понравился пост - поделись с друзьями в соц сетях!

Нравится

Комментариев (69)

  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; если не подходит, можно подобрать методом научного тыка ;)

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

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

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

    • pasagir:

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

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

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

    • pasagir:

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

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

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

    • pasagir:

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

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

    • pasagir:

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

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

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

    • pasagir:

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

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

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

    • pasagir:

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

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

  12. Дмитрий:

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

    • pasagir:

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

      • Дмитрий:

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

        • pasagir:

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

          • Дмитрий:

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

          • Дмитрий:

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

          • pasagir:

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

          • Дмитрий:

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

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

    • pasagir:

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

  14. Vlad:

    Привет!

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

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

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

    • pasagir:

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

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

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

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

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

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

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

  21. Миша:

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

Добавить комментарий для pasagir Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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