Кнопка вверх для сайта на WordPress: как сделать плавающую кнопку как вКонтакте?

01.04.2012 / admin / WordPress комментария 82

Наверняка многие привыкли к кнопке вверх вКонтакте. Часто на сайтах по привычке можно нажать на левую часть экрана в ожидании поднятия странички вверх, но не тут то было... Часто на длинных страницах хочется использовать кнопку вверх не обязательно как вКонтакте, а просто для поднятия вверх по страничке, потому что уж очень длинный скроллинг получился. Как этого добиться на своем сайте на WordPress?

Кнопка вверх для сайта на WordPress: как сделать плавающую кнопку как вКонтакте?

Все очень просто, используется функция (часто называемая скрипт или scroll to top без плагина). Мне понравилась эта функция тем, что она очень хорошо работает, без лагов. К тому же ее можно настроить под себя и сделать это свершенное просто! Собственно вот сама функция.

Вы можете ее скопировать или скачать txt файл в котором я ее сохранил. Эту функцию добавляем в файл functions.php (желательно в самый низ, до тега ?>). Впрочем в самой функции все уже описано, лишь уточню некоторые детали:
  • если вы хотите сделать картинку вместо фразы "Вверх", то уберите get_bloginfo('template_url'). и укажите путь к картинке вместо /images/up.png
  • постарайтесь подобрать оптимальное значение исходя из особенностей вашей темы и разрешением экрана большинства пользователей (поиграйтесь с цифрами $width = '10'; и $margin = 5;

Функцию написал SlowProg.

Эти статьи еще интереснее!
Кнопка вверх для сайта на WordPress: как сделать плавающую кнопку как вКонтакте?: 82 комментариев
  1. андрей

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

  2. ALF

    Мэн))) БОЛЬШУЩЕЕ ТЕБЕ СПАСИБО! за этот пост. Давно хотел реализовать на блоге эту фичу и вот оно.... Я бы назвал эту функцию своеобразной панацеей от скучно и нудного стандартноо скроллинга. ДА здравствует юзабилити.

    • admin

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

  3. splik

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

  4. Семён

    Добавлял функцию на свой сайт, столкнулся с проблемой - при нажатии на поле "вверх", страница прокручивается правильно и возвращается в начало страницы. Но при попытке прокрутить страницу вниз она тут же возвращается вверх

    • admin

      Скорее всего это особенности вашей темы не дают функции правильно работать... Бывает что некоторые функции не работают вообще на определенных темах. Сам код верный и у меня все работает без проблем... так что косячок увы у вас... :) Попробуйте на локальном хосте с другой темой.

  5. Money

    Установил! Все работает отлично, только вот картинка, которая появляется, отображается не вверху как у Вас, а внизу экрана! Подскажите, пожалуйста, как сделать сверху?

    • admin

      $vAlign = 'top';
      то есть вместо bottom указываем top

      • Money

        Спасибо, все получилось! Подскажите, пожалуйста, можно ли сделать полосу подъема страницы вверх более прозрачной?

        • admin

          В строке цвет фона при наведении можно выбрать цвет. Это пока все настройки.

  6. Foster

    Привет. Спасибо за фишку! Подскажи, как можно сделать прозрачным цвет фона при наведении?

    • admin

      Без понятия... А смысл делать прозрачным - полоса прокрутки вверх должна быть видна, что бы человек понимал, что это зона нажав на которую можно подняться вверх.

  7. Alexander

    А у меня нет в конце "functions.php (желательно в самый низ, до тега ?>)" тега ?>
    Что мне делать!?!??!
    Помогите мне пожалуйста, скрипт реально супер!

  8. Alexander

    У меня выходит могу скинуть код функций, может у меня новый вордпресс, или старый, но помогите плиз =)

    • admin

      Этот файл должен быть.

      • Alexander

        файл как бы есть, но в нем нет окончания тегом ?>.
        А если просто влепить куда-либо в файл то просто ничего не происходит....
        Есть варианты, сайт ,кстати, прилеплен тут.

        • admin

          Значит что то не так делаете. При правильном подходе все работает :) У меня же заработало .

          • Alexander

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

            И собственно лепить некуда.....

            • admin

              Увы я ничем не могу помочь - у меня все работает. У других тоже.

              • Alexander

                Можете мне скинут свой файлик, как он выглядит у вас?

        • Allpa

          Нет, нужно именно в function.php
          Если у вас там нет ?> (у меня, кстати, тоже нет), запихивайте код сразу под последним имеющимся символом (у меня это }; )

  9. Alexander

    кстати мой код в прошлом комменте скрыло....

  10. Смекалкин

    Я теперь круче чем Дуров!! ЕЕЕЕ...

    • admin

      Да, только вы не пометили полосу, что это прокрутка. Сделайте хотя бы слово Наверх.

      • Смекалкин

        Спать хотелось сильно, код закинул, но не доковырял, сейчас уже все работает!

        • admin

          Картинка жесть :) Лучше что то тематичное...

          • Смекалкин

            Тематичнее некуда, в форексе есть два типа направления тренда, бычий - вверх и медвежий вниз! Так что фейс быка для прокрутки вверх очень даже тематично ))) Трейдеры поймут! :))

            • admin

              ААА! Теперь понял символичность. Далек от форекса, поэтому не понял. Ну вот и отлично - теперь сайт юзабильней и сподручней. Успехов в бизнесе! :)

  11. Булат

    у меня на сайт теперь не заходит!!! говорит не существует такого адреса! P.S. я поменял картинку на другую, удалил get_bloginfo('template_url') и поменял путь вместо /images/up.png

    • admin

      Обратитесь к разработчику - он указан в конце поста. Погуглите что бы найти его блог...

      • Булат

        я сайт создал, там изменил, и у меня при входе на сайт пишет что его нет! я разработчик

    • Allpa

      По всей видимости, Вы неправильно вставили код в файл function.php

      Не так давно я сама с этим мучилась: в каждом шаблоне этот function.php свёрстан по-разному, поэтому тут важно понять, как добавлять туда новые коды так, чтобы блог не рухнул в результате.
      Лучше всего все новшества тестировать сперва на локалке. И, убедившись, что всё работает, переносить на блог.

  12. Allpa

    Всё работает, огромное спасибо.
    Вопрос: подскажите, плз, как соорудить такой же "Лифт наверх" как в Вашем блоге) Ну, вот эта полупрозрачная кнопка посередине страницы.
    Я правильно понимаю, это та же функция + css? Если да, то поделитесь своим кодом css, а? Если не жалко, конечно)

  13. Дмитрий 31

    О, ... я попробывал установить кнопку, следуя Вашим инструкциям. Ничего не получилось - и это пол-беды. А когда, возвращал назад все - полетел шаблон (будьте ОЧЕНЬ осторожны, залезая в код файла "functions").
    Но, есть и положительный момент (то, чему я научился): пока я самостоятельно все устранил (на след.утро минут за 10), особо не разбираясь в кодах php (да, и др. тоже), я определил тему шаблона сайта (на чужом с аналогичной темой)и через FTP-соединение заменил "поломаный" файл на "здоровый".
    Ps: Попробую себе установить кнопочку "вверх" по какому-нибудь другому рецепту.

    • admin

      Дмитрий, выше дал ссылку на безопасный способ.

  14. Костя

    как сделать чтобы кнопка была по центру внизу как у Вас (Лифт на верх)

    • admin

      В предыдущем комментарии писал, будьте внимательнее.

  15. denys

    один косяк с этой функцией,в эксплоере не работает она.

  16. Slam

    Класс, спасибо. Посмотрим, будет ли влияние на поведенческий фактор.

  17. Юра

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

    • admin

      $vAlign = 'bottom';
      меняете на
      $vAlign = 'top';

  18. Юра

    Спасибо.))

  19. Андрей

    Смотрю вы переделали функцию "вверх" сбоку, сейчас удобней стало, а то листать страницы было не очень удобно (переключение на 2 страницу).

    • admin

      Угу. Стараюсь дотачивать до универсального использования (хотя на моем мониторе идеально было).

  20. максим

    Здравия вам ,как и полагается поставил код в файл functions.php в верх не поднимется только при движении стрелки в лево обозначает в верх но не поднимается .и полоски не видать.
    благодарствую ,расскажите причину

    • admin

      Все вопросы разработчику. Я не программист.

  21. Антон

    Отличный скрипт, спасибо автору! Все гораздо проще, чем казалось!

  22. Дмитрий

    Ну если честно - не очень удбный плагин - потому что он висит постоянно посредине и нет окантовки. Есть какой то другой похожий?

    • admin

      Если он у вас посередине, то у вас какие проблемы, у меня он внизу выводит кнопку полупрозрачную - отлично выглядит. Других не искал.

      • Дмитрий

        Ну попробую еще поставить функцию как вы написалы в посте выше - может так пусть будет по первой пока не разберусь почему с тем плагином ьаг вышел

        • admin

          Понятненько. Ну разгребайте, в программировании ноль, так что посоветовать мало что могу.

  23. Дмитрий

    Ну так и есть - полупрозрачный - ну тут ситуация был до этого Ultimate back to top но он перестал работать :) не знаю почему но не выодится, ни другой похожий плагин.

  24. Gadgetman

    Для тех кому надо сделать сам левый блок при наведении более прозрачным, поменяйте opacity:1 на opacity:0.5 или любое другое значение от 0 до 1

  25. Angelina

    Подскажите пожалуйста, как сделать кнопочку справа чтобы она была, а не с левого угла
    Спасибо!

  26. Angelina

    А где найти автора))))

    • admin

      Его ник указан. Погуглите.

      • Angelina

        Спасибо) я нашла уже, как в коде поменять) спасибо за инфу)

  27. Павел Богданов

    Чегой-то не взлетело. Может проблема в теме Minimatica или в кривых руках?
    Ничего не нужно писать в шаблоны страниц?

    • admin

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

  28. Вадим

    Здравствуйте, а как левый блок сделать шире, например в 2 раза?
    замечательная вещь), спс

    • admin

      За это отвечает переменная $width

      • Вадим

        да, но не понимаю как ее задать в коде html

        • admin

          Она уже прописана в коде. Просто изменяйте цифры и увидите как ширина полоски будет меняться.

  29. Лилия

    Огромнейшее спасибо, все работает. А то плагин при обновлении вордпреса начал глючить, а потом вобще кнопка исчезла. Вы здорово помогли.

  30. Елена

    Здравствуйте! Поставила кнопку по вашему коду работает отлично и мне очень нравилась, но сейчас мне нужно эту кнопку убрать, так как она не работает вместе с плагином оптимизации. Но когда убрала код из functions.php весь экран стал белым с зашифрованным кодом. Подскажите как убрать код без последствий? Заранее спасибо.

    • admin

      Действия обратные установке. Вы вместе с тем кодом что то еще удалил случайно. Внимательно удалите только тот код который добавляли.

  31. Ольга

    Доброй ночи!
    У меня не работает((( все сделала как у Вас написано. Подскажите пожалуйста почему так. Заранее спасибо.

    • admin

      Оль, это к разработчику вопрос. попробуйте вместо этого плагин использовать, он у всех почти работает.

  32. Ольга

    Знаете что интересно:) у меня и плагины не работают, а так хотела загрузить побольше статей на сайт. Пробовала активировать Ax ScrollTo Top и jQuery Smooth Scroll

    • admin

      Хм, может в браузере проблема? Попробуйте в разных браузерах, попробуйте обновить их и сами плагины.

  33. Ольга

    У меня стоит 4 браузера и ни в одном не работает. Попробую написать разработчикам, обновление плагинов было в декабре 12 года и у всех работает, а у меня нет)

    • admin

      Странно... может с вашей темой просто не работает...

  34. Лилия

    Подскажите пожалуйста как правильно указать путь к файлу. А то боюсь чтобы тема не полетела. Хочу поставить анимированных бабочек на подем вверх.

    • admin

      Просто в корень закиньте файл и после слеша (/) укажите название файла.

  35. Наталья

    Доброе время суток!
    Огромное спасибо за статью все очень просто быстро и самое главное работает!!!

    А можно ли убрать фон вообще? Зарание спасибо. Желаю творческих успехов!

    • admin

      Думаю это лучше узнать у разработчика. Я указал в посте его ник.

  36. Андрей

    Здравствуйте.
    Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений "moskva.biglus точка ком" с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

    • admin

      Я не создавал такие сайты.

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

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

ОБЯЗАТЕЛЬНО РЕШИТЕ ПРИМЕР! * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.