Наверняка многие привыкли к кнопке вверх вКонтакте. Часто на сайтах по привычке можно нажать на левую часть экрана в ожидании поднятия странички вверх, но не тут то было… Часто на длинных страницах хочется использовать кнопку вверх не обязательно как вКонтакте, а просто для поднятия вверх по страничке, потому что уж очень длинный скроллинг получился. Как этого добиться на своем сайте на WordPress?
Все очень просто, используется функция (часто называемая скрипт или scroll to top без плагина). Мне понравилась эта функция тем, что она очень хорошо работает, без лагов. К тому же ее можно настроить под себя и сделать это свершенное просто! Собственно вот сама функция.
Вы можете ее скопировать или скачать txt файл в котором я ее сохранил. Эту функцию добавляем в файл functions.php (желательно в самый низ, до тега ?>). Впрочем в самой функции все уже описано, лишь уточню некоторые детали:
- если вы хотите сделать картинку вместо фразы «Вверх», то уберите
get_bloginfo('template_url').и укажите путь к картинке вместо/images/up.png - постарайтесь подобрать оптимальное значение исходя из особенностей вашей темы и разрешением экрана большинства пользователей (поиграйтесь с цифрами
$width='10'; и$margin= 5;
Функцию написал SlowProg.
83 ответа к “Кнопка вверх для сайта на WordPress: как сделать плавающую кнопку как вКонтакте?”
отличная идея и оказывается все так просто я себе сейчас же сделаю, кнопка вверх очень удобна для чтения длиных статей вообщем супер!!!
Мэн))) БОЛЬШУЩЕЕ ТЕБЕ СПАСИБО! за этот пост. Давно хотел реализовать на блоге эту фичу и вот оно…. Я бы назвал эту функцию своеобразной панацеей от скучно и нудного стандартноо скроллинга. ДА здравствует юзабилити.
ДА! очень юзабильная штука -особенно в свете того что многие привыкли к контакту.
Да, неплохо было бы такую штуку блогерам порекомендовать, а то бывает надоедает колёсиком крутить, а так нажал кнопку и уже вверху. Хорошая вещь
Добавлял функцию на свой сайт, столкнулся с проблемой — при нажатии на поле «вверх», страница прокручивается правильно и возвращается в начало страницы. Но при попытке прокрутить страницу вниз она тут же возвращается вверх
Скорее всего это особенности вашей темы не дают функции правильно работать… Бывает что некоторые функции не работают вообще на определенных темах. Сам код верный и у меня все работает без проблем… так что косячок увы у вас… :) Попробуйте на локальном хосте с другой темой.
Установил! Все работает отлично, только вот картинка, которая появляется, отображается не вверху как у Вас, а внизу экрана! Подскажите, пожалуйста, как сделать сверху?
$vAlign = ‘top‘;
то есть вместо bottom указываем top
Спасибо, все получилось! Подскажите, пожалуйста, можно ли сделать полосу подъема страницы вверх более прозрачной?
В строке цвет фона при наведении можно выбрать цвет. Это пока все настройки.
Привет. Спасибо за фишку! Подскажи, как можно сделать прозрачным цвет фона при наведении?
Без понятия… А смысл делать прозрачным — полоса прокрутки вверх должна быть видна, что бы человек понимал, что это зона нажав на которую можно подняться вверх.
А у меня нет в конце «functions.php (желательно в самый низ, до тега ?>)» тега ?>
Что мне делать!?!??!
Помогите мне пожалуйста, скрипт реально супер!
У меня выходит могу скинуть код функций, может у меня новый вордпресс, или старый, но помогите плиз =)
Этот файл должен быть.
файл как бы есть, но в нем нет окончания тегом ?>.
А если просто влепить куда-либо в файл то просто ничего не происходит….
Есть варианты, сайт ,кстати, прилеплен тут.
Значит что то не так делаете. При правильном подходе все работает :) У меня же заработало .
Ок, версии вордпресса могут быть разные.
Но все же, куда там можно лепить? Там куча разных начал пхп кода:
И собственно лепить некуда…..
Увы я ничем не могу помочь — у меня все работает. У других тоже.
Можете мне скинут свой файлик, как он выглядит у вас?
Нет :)
Нет, нужно именно в function.php
Если у вас там нет ?> (у меня, кстати, тоже нет), запихивайте код сразу под последним имеющимся символом (у меня это }; )
кстати мой код в прошлом комменте скрыло….
Я теперь круче чем Дуров!! ЕЕЕЕ…
Да, только вы не пометили полосу, что это прокрутка. Сделайте хотя бы слово Наверх.
Спать хотелось сильно, код закинул, но не доковырял, сейчас уже все работает!
Картинка жесть :) Лучше что то тематичное…
Тематичнее некуда, в форексе есть два типа направления тренда, бычий — вверх и медвежий вниз! Так что фейс быка для прокрутки вверх очень даже тематично ))) Трейдеры поймут! :))
ААА! Теперь понял символичность. Далек от форекса, поэтому не понял. Ну вот и отлично — теперь сайт юзабильней и сподручней. Успехов в бизнесе! :)
у меня на сайт теперь не заходит!!! говорит не существует такого адреса! P.S. я поменял картинку на другую, удалил get_bloginfo(‘template_url’) и поменял путь вместо /images/up.png
Обратитесь к разработчику — он указан в конце поста. Погуглите что бы найти его блог…
я сайт создал, там изменил, и у меня при входе на сайт пишет что его нет! я разработчик
По всей видимости, Вы неправильно вставили код в файл function.php
Не так давно я сама с этим мучилась: в каждом шаблоне этот function.php свёрстан по-разному, поэтому тут важно понять, как добавлять туда новые коды так, чтобы блог не рухнул в результате.
Лучше всего все новшества тестировать сперва на локалке. И, убедившись, что всё работает, переносить на блог.
Мудрейший совет! :)
Всё работает, огромное спасибо.
Вопрос: подскажите, плз, как соорудить такой же «Лифт наверх» как в Вашем блоге) Ну, вот эта полупрозрачная кнопка посередине страницы.
Я правильно понимаю, это та же функция + css? Если да, то поделитесь своим кодом css, а? Если не жалко, конечно)
Алис, вот тут писал http://seopmr.ru/scroll-to-top-plagin-knopki-vverx-dlya-sajta-na-wordpress.html
О, … я попробывал установить кнопку, следуя Вашим инструкциям. Ничего не получилось — и это пол-беды. А когда, возвращал назад все — полетел шаблон (будьте ОЧЕНЬ осторожны, залезая в код файла «functions»).
Но, есть и положительный момент (то, чему я научился): пока я самостоятельно все устранил (на след.утро минут за 10), особо не разбираясь в кодах php (да, и др. тоже), я определил тему шаблона сайта (на чужом с аналогичной темой)и через FTP-соединение заменил «поломаный» файл на «здоровый».
Ps: Попробую себе установить кнопочку «вверх» по какому-нибудь другому рецепту.
Дмитрий, выше дал ссылку на безопасный способ.
как сделать чтобы кнопка была по центру внизу как у Вас (Лифт на верх)
В предыдущем комментарии писал, будьте внимательнее.
один косяк с этой функцией,в эксплоере не работает она.
Класс, спасибо. Посмотрим, будет ли влияние на поведенческий фактор.
Здравствуйте,очень полезная статья,скажите-а как сделать чтоб парашут был в верхнем левом углу,ато он у меня в нижнем..лол за ранее спасибо!
$vAlign = ‘bottom’;
меняете на
$vAlign = ‘top’;
Спасибо.))
Смотрю вы переделали функцию «вверх» сбоку, сейчас удобней стало, а то листать страницы было не очень удобно (переключение на 2 страницу).
Угу. Стараюсь дотачивать до универсального использования (хотя на моем мониторе идеально было).
Здравия вам ,как и полагается поставил код в файл functions.php в верх не поднимется только при движении стрелки в лево обозначает в верх но не поднимается .и полоски не видать.
благодарствую ,расскажите причину
Все вопросы разработчику. Я не программист.
Отличный скрипт, спасибо автору! Все гораздо проще, чем казалось!
Ну если честно — не очень удбный плагин — потому что он висит постоянно посредине и нет окантовки. Есть какой то другой похожий?
Если он у вас посередине, то у вас какие проблемы, у меня он внизу выводит кнопку полупрозрачную — отлично выглядит. Других не искал.
Ну попробую еще поставить функцию как вы написалы в посте выше — может так пусть будет по первой пока не разберусь почему с тем плагином ьаг вышел
Понятненько. Ну разгребайте, в программировании ноль, так что посоветовать мало что могу.
Ну так и есть — полупрозрачный — ну тут ситуация был до этого Ultimate back to top но он перестал работать :) не знаю почему но не выодится, ни другой похожий плагин.
Для тех кому надо сделать сам левый блок при наведении более прозрачным, поменяйте opacity:1 на opacity:0.5 или любое другое значение от 0 до 1
Подскажите пожалуйста, как сделать кнопочку справа чтобы она была, а не с левого угла
Спасибо!
Все вопросы к автору.
А где найти автора))))
Его ник указан. Погуглите.
Спасибо) я нашла уже, как в коде поменять) спасибо за инфу)
Чегой-то не взлетело. Может проблема в теме Minimatica или в кривых руках?
Ничего не нужно писать в шаблоны страниц?
Скорей всего загвоздка в теме. Разработчик пишет, что не на всех темах работает. А кривые руки вряд ли — тут же просто нужно вставить код :)
пс
смайлик внизу слева улыбнул :)
Здравствуйте, а как левый блок сделать шире, например в 2 раза?
замечательная вещь), спс
За это отвечает переменная $width
да, но не понимаю как ее задать в коде html
Она уже прописана в коде. Просто изменяйте цифры и увидите как ширина полоски будет меняться.
Огромнейшее спасибо, все работает. А то плагин при обновлении вордпреса начал глючить, а потом вобще кнопка исчезла. Вы здорово помогли.
Здравствуйте! Поставила кнопку по вашему коду работает отлично и мне очень нравилась, но сейчас мне нужно эту кнопку убрать, так как она не работает вместе с плагином оптимизации. Но когда убрала код из functions.php весь экран стал белым с зашифрованным кодом. Подскажите как убрать код без последствий? Заранее спасибо.
Действия обратные установке. Вы вместе с тем кодом что то еще удалил случайно. Внимательно удалите только тот код который добавляли.
Доброй ночи!
У меня не работает((( все сделала как у Вас написано. Подскажите пожалуйста почему так. Заранее спасибо.
Оль, это к разработчику вопрос. попробуйте вместо этого плагин использовать, он у всех почти работает.
Знаете что интересно:) у меня и плагины не работают, а так хотела загрузить побольше статей на сайт. Пробовала активировать Ax ScrollTo Top и jQuery Smooth Scroll
Хм, может в браузере проблема? Попробуйте в разных браузерах, попробуйте обновить их и сами плагины.
У меня стоит 4 браузера и ни в одном не работает. Попробую написать разработчикам, обновление плагинов было в декабре 12 года и у всех работает, а у меня нет)
Странно… может с вашей темой просто не работает…
Подскажите пожалуйста как правильно указать путь к файлу. А то боюсь чтобы тема не полетела. Хочу поставить анимированных бабочек на подем вверх.
Просто в корень закиньте файл и после слеша (/) укажите название файла.
Доброе время суток!
Огромное спасибо за статью все очень просто быстро и самое главное работает!!!
А можно ли убрать фон вообще? Зарание спасибо. Желаю творческих успехов!
Думаю это лучше узнать у разработчика. Я указал в посте его ник.
Здравствуйте.
Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений «moskva.biglus точка ком» с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.
Я не создавал такие сайты.
Здравствуйте, может есть возможность дописать скрипт, что бы на мобильном устройстве кнопка была внизу в виде картинки со стрелкой или что то вроде этого. На мобильном телефоне данный скрипт закрывает часть контента как не крути.