Полезное        02 октября 2012        198         39

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

Всем привет!

Сегодня, я вам расскажу про очень интересное, а самое главное полезное дополнение для любого ресурса, такое как кнопка вверх для сайта. Большинство из вас, наверняка встречали на многих сайтах эту кнопочку? Но, если вы читаете эту статью, то мое предположение, что на вашем блоге ее до сих пор еще нет? Но не расстраивайтесь, после прочтения этого поста, у вас не составит труда обзавестись этим полезным гаджетом.

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

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

Открываете, понравившуюся вам статейку на 5000-10000 символов, прочитав начало статьи, понимаете, что контент интересный и продолжаете читать дальше. Но дочитав до середины поста, вспоминаете, что упустили из виду один очень важный момент. Что делать? Возвращаться к началу. И тут начинаете наяривать колесико мышки до покраснения, чтобы вернуться в самое начало поста. Не знаю, как вас, а меня это малость напрягает.

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

Давайте рассмотрим два варианта вставки на ваш блог этой замечательной приспособы:
1. Кнопка вверх jquery. Установка при помощи специального скрипта.
2. Scroll to Top Plugin. Установка при помощи специального плагина.

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

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

Чтобы установить кнопку вверх при помощи скрипта jquery, вам потребуется скачать вот этот архив. В нем вы увидите два файла. Первый файл «top.js» — сам скрипт кнопочки, а второй файл «vverh.png» — ее изображение. Закачиваем эти файлы в корень вашего блога. В зависимости от вашего хостинга это будет или httpdocs, или public_html (корневая папка вашего блога где хранятся все ваши файлы).

Я завел в корне своего блога отдельную папку files — куда поместил сам скрипт «top.js» и отдельную папку images — куда поместил «vverh.png». При написании постов часто требуется указать путь к тому или иному файлу, и чтобы все файлы не были в одной куче, для удобства используйте дополнительные папки, чтобы все было на своих местах. Если у вас их нет, советую завести, в дальнейшем пригодятся.

Теперь вам потребуется вставить специальный код в файл с темой вашего блога footer.php. При вставке кода через загрузчик на хостинге, некоторые темы WordPress почему-то некорректно отображают эти самые кнопки.

Поэтому лучше вставить код через административную панель (админку) вашего движка (я пользуюсь движком WordPress). Заходим в админ панель и переходим непосредственно к файлу footer.php (Внешний вид/Редактор/Подвал блога (footer.php)). Открываем его и вставляем в самом конце перед закрывающимся тегом </body> вот этот код:

<a id="toTop" href="#"><img src="http://mysait.ru/images/vverh.png" alt="« align=»absmiddle" border="0" /></a>
 <script type="text/javascript" src="http://mysait.ru/top.js"></script><script type="text/javascript">// <![CDATA[
 $(function() { $("#toTop").scrollToTop(); });
 // ]]></script>


После того, как код вставлен, не забудьте прописать вместо mysait.ru свое доменное имя. А также, если вы загрузили скрипт и картинку в другие папки, укажите правильный путь к ним.

Нажимаем кнопку «Обновить файл». У меня это выглядит следующим образом (кликните по изображению для увеличения):

кнопка вверх

C этим я думаю, разобрались. Идем дальше. Теперь нужно привязать к нашему коду таблицу стилей. Заходим в админку, открываем файл  style.css (Внешний вид/Редактор/Таблица стилей (style.css)) и вставляем в самом конце, после всех стилей, вот это код:

#toTop {
width: 100px;
border: 0px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;}


Нажимаем кнопку «Обновить файл».

Здесь вы можете поменять настройки по своему усмотрению. Дальше переходим на свой блог. Обновляем страницу и любуемся нашей замечательной кнопочкой вверх для сайта в правом нижнем углу страницы. Но обратите внимание, что она на вашем блоге постоянно находится в режиме видимости и работает очень грубо. Т.е. если вы пролистаете страницу вниз, а потом нажмете на нее, то мгновенно окажетесь вверху страницы, а сама кнопка вверх, плавно не растворится, как это происходит на моем блоге.

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

— плавный переход по странице, или ее еще называю плавающая;

— в самом верхнем положении страницы, она растворяется и становится невидимой;

необходимо подключить к нашему скрипту библиотеку jquery. Это делается следующим образом. Заходим в админку, открываем файл  functions.php (Внешний вид/Редактор/Функции темы (functions.php)) и вставляем в самом конце перед тегом:

?>

вот этот код:

// smart jquery inclusion
if (!is_admin()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
 wp_enqueue_script('jquery');
}


Нажимаем кнопку «Обновить файл». У меня это выглядит так (кликните по изображению для увеличения):

кнопка вверх

Все! Вот теперь мы имеем полноценную кнопку вверх!

Внимание для тех, кто совсем не разбирается в HTML/CSS: во избежание каких-либо проблем, настоятельно рекомендую вам перед правкой кодов, скопировать редактируемые файлы в отдельную папку на ПК. Чтобы в случае возникновения непредвиденных обстоятельств, вы всегда смогли вернуть все на свои места.

И еще один момент! Бывает такое, что кнопочка не вписывается в дизайн блога (не тот цвет, форма). В этом случае вы с легкостью можете скачать любое изображение в интернете, обработать его в графическом редакторе и загрузить тем же путем.

Только не забывайте указывать путь, менять название изображения и ставить правильное расширение файла (jpeg, gif, png). Это не должно составить у вас какого-то  труда. Если что-то не будет получаться, можете всегда оставить комментарий с текстом вашей проблемы или написать мне в форму обратной связи. Я всегда помогу.

Scroll to Top Plugin

Если уж вам совсем не хочется возиться с кодами шаблона! То для вас найдется другой вариант установки кнопки вверх, при помощи плагина Scroll to Top. Перейдите по этой ссылке и скачайте плагин к себе на ПК. Загрузите архив в папку с плагинами вашей темы через админ панель или хостинг, кому как удобно, мне удобней через админку (Плагины/Добавить новый/Загрузить/Обзор (указываем путь к плагину)/Установить/Активировать). Все готово!

Теперь нужно перейти в настройки плагина (Параметры/Кнопка вверх) и поиграться с такими настройками как «скорость пролистывания вверх (в миллисекундах)» и «после какой строки она должна появиться». После выставления нужных вам настроек, не забывайте нажать «Сохранить».

Также в виде презента в этом плагине присутствую дополнительные картинки с изображениями множества различных кнопочек. Достаточно будет указать ссылку на изображение в настройках плагина в поле «ссылка к изображению кнопки» и она изменит внешний вид.

Вот в принципе и все, что я хотел вам сегодня рассказать. Для тех, кто не любит копаться в кодах: помните, что любой плагин, активированный на вашем блоге, дает приличную нагрузку на ваш сайт и при большом их использовании, ресурс может тормозить при загрузке. Лучше от плагинов избавляться, но решать вам, мое дело вас предупредить. В скором времени напишу еще один классный пост, подпишитесь на обновления моего блога и вы узнаете о выходе новых статей одним из первых!

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

как установить смайлики;
как установить аватар.

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

Как вам статья? А у вас имеется на блоге кнопка вверх? Как вы ее устанавливали? При помощи кода или плагина? Рад буду услышать ваши комментарии!

С уважением, Николай Коротков

Обсуждение: 39 комментариев
  1. Мне больше нравится кнопочка как в соц. сетях, прибитая к левому краю и всплывающая при наведении курсора. IMO, намного лучше, чем когда она глаза мозолит постоянно.

    [Ответить]

    Николай Коротков

    ZeroXor
    Кому как нравится

    [Ответить]

    Ответить
  2. Интересная статья. Думаю будет полезна многим. Интересно было бы ещё прочитать о выдвигающейся кнопке вверх — например справа только маленькая стрелочка, а при наведении на неё выдвигается текст

    [Ответить]

    Николай Коротков

    Александр
    Можно сделать и такое, это называется всплывающие окна. По мне, так это лишнее…

    [Ответить]

    Ответить
  3. У меня или шаблон темы вставку кода не любит 🙂 или вставляю коряво — ничего кодами без проблем с темой не получается. Даже попытка вставить для не имеющих картинки граватара комментаторов свою закончилась откатом архива. Приходится грузить блог плагинами 🙁

    [Ответить]

    Ответить
  4. Денис:

    кнопочка вверх очень удобна. но желательно также иметь ещё кнопку вниз

    [Ответить]

    Ответить
  5. Николай спасибо за объяснения
    сделала все так у меня при нажатии на стрелку
    после урла прописывается /#
    посмотрела у Вас нет
    что я не так сделала?

    [Ответить]

    Николай Коротков

    Наталья Гегер
    Скорее всего при указании ссылки на рисунок вашей кнопки вверх, вы где-то допустили ошибку. При наведении мышки на кнопку ссылка вообще не должна отображаться (у вас отображается). Попробуйте проделать еще раз всю последовательность действий, но очень внимательно. Наверняка вы найдете ошибку… Другого я не могу вам ничего посоветовать, т.к. нужно видеть и знать, что вы делали со скриптами и кодами.

    [Ответить]

    Ответить
  6. вот такой код я вставила в футере

    //

    картинка лежит в папке паблик

    может дело в этой строке? href=»#»

    [Ответить]

    Николай Коротков

    Наталья Гегер
    Нет дело не в ней. Попробуйте заново скопировать код, указанный в статье и вставить в footer.php. Вместо mysait.ru в двух местах скрипта пропишите speshu-domoy.ru. Должно все работать правильно…

    [Ответить]

    Наталья Гегер

    не получается
    делаю все один в один

    [Ответить]

    Николай Коротков

    Наталья Гегер
    А в стилях файла style.css ничего не меняли?

    [Ответить]

    Наталья Гегер

    код добавила, который в статье

    [Ответить]

    Николай Коротков

    Тогда я ничего не понимаю… Скиньте мне на e-mail два файла вашей темы footer.php и style.css, я посмотрю.

    Ответить
  7. Юлия:

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

    [Ответить]

    Николай Коротков

    Юлия
    Конечно можно. Для этого вам понадобиться отредактировать код, который вы вставляли в файл style.css, а вернее его элементы padding,bottom и right.

    [Ответить]

    Ответить
  8. Юлия:

    Стала внимательно изучать код. Почти всё понятно.
    Насчет библиотеки jquery — стала разбираться, зашла на сайт Jquery, там всякие новые версии описываются.
    Николай, вы не знаете, ваш код он подключает с гугла какую версию? В гугле сейчас стоит 1.11.0, если я правильно понимаю. Видимо, она и подключается. Для кнопки всё равно, какая версия jquery, как вы думаете?

    [Ответить]

    Николай Коротков

    Юлия
    На счет версий jquery я не заморачивался. Для кнопки вверх, версия библиотеки скорее всего не имеет значения.

    [Ответить]

    Ответить
  9. Юлия:

    Вроде всё понятно написано, сделала пошагово. Кнопка-то есть, а вот библиотека jquery не подключилась. (кнопка есть, но она не исчезает и перемещение вверх не плавное). Причем вроде там негде ошибиться-то?
    Просмотрела вчера много статей по кнопкам, некоторые предлагают подключать
    jquery через header, там другая ссылка будет на гугл. Или даже закачать эту библиотеку к себе на хостинг, чего не хочется.
    Николай, я вижу по комментариям, что такие сложности были. Возможно, вы даже уже решали проблему с подключением jquery. Из-за чего может не подключаться? Я вижу только один вариант — сама ссылка не работает. Вряд ли это от места расположения кода в functions…

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Ответить
  10. Юлия:

    Посмотрела через firebug — jquery подключается.
    Посмотрела на вашу стрелку — у вас в коде нет «href «#».Во всяком случае firebug так показывает. У вас .
    style=»display: block;» — это что? Подскажите, пожалуйста.

    [Ответить]

    Николай Коротков

    Юлия
    style=»display: block;» — это стиль какого-то элемента, дело не в этом. Проверьте, правильно ли вы указали путь до javasсript. Вот в этом месте: type="text/javascript" src="http://mysait.ru/top.js">

    [Ответить]

    Ответить
  11. Путь правильный, уже все проверила. Вижу, что jquery подключился, top.is работает.

    [Ответить]

    Николай Коротков

    Юлия
    top.is — это вы сейчас ошиблись при написании, или в коде у вас так и прописано? Должно быть top.js.

    [Ответить]

    Ответить
  12. Юлия:

    нет, это я сейчас ошиблась в написании здесь. Я вам имя сайта написала, посмотрите сами, пожалуйста.
    Href # — это якорь, сейчас попробую его убрать. У вас-то его в коде не видно.

    [Ответить]

    Ответить
  13. Юлия:

    Нет, если у меня высвечивается якорь href # — значит, скрипт не работает. А у вас якорь не высвечивается, потому что скрипт работает, а якорь нет. Скорее всего, не у всех можно подключить через functions.php. И это зависит от темы. Буду пробовать подключить jquery по-другому.

    [Ответить]

    Ответить
  14. Юлия:

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

    [Ответить]

    Николай Коротков

    Юлия
    Смотрел код вашей кнопочки, вроде все правильно, библиотека подключена, а вот почему плавная прокрутка не работает, понять пока не могу?? Видимо, где-то какой0то конфликт.

    [Ответить]

    Ответить
  15. Юлия:

    Здесь у вас уже писали в комментариях: «у меня при нажатии на стрелку
    после урла прописывается /#». У меня тоже есть такой эффект.
    В общем, когда разберусь, напишу. Разобраться хочется.

    Николай, а вы точно до того, как установить кнопку, не подключали jquery другим способом? У вас точно код подключения через functions.php работает?

    Я видела такой же код на других блогах тоже, у них тоже работает, но вот у меня почему-то так не получается..

    [Ответить]

    Николай Коротков

    Юлия
    Ну конечно точно! Неужели я буду писать недостоверную информацию? Я все делал именно так, как описано в статье.

    [Ответить]

    Ответить
  16. Юлия:

    Jquery я подключила как многие советуют, прописав строку в header до закрывающего тега . Проверила вашу версию 1.9.1, у меня такая же.
    Вы не поверите — фишка в том, чтобы в footer прописать второй скрипт не в одну строку, а в три строки! (не тот, который из файла top.js подтягивается!, а тот, который <![CDATA] и дальше)
    Я посмотрела через firebug как у вас отображается скрипт, сделала так же, просто попробовала, не особо надеясь на удачу. И кнопка заработала как у вас.
    Осталось только подвинуть левее, но это уже со стилями надо разбираться. Кстати, цвет кнопки поменять нельзя, она будет такая же, как в файле. color меняет цвет текста, которого на этой кнопке нет.
    Ура!

    [Ответить]

    Николай Коротков

    Юлия
    Рад, что у вас все получилось! И спасибо, что поделились информацией по решению проблемы. Я уверен, что многим она поможет.

    [Ответить]

    Ответить
  17. Николай, долго разбиралась и теперь знаю, как можно улучшить эту кнопку. Мне хотелось, чтобы прокрутка наверх была плавнее и чтобы кнопка появлялась чуть позже. Для этого надо внести изменения в файл top.js.
    if($(window).scrollTop()!=»0″) вот эта строка задает время появления кнопки. Нужно заменить !=»0″ на, например, >=»250″, и тогда она станет появляться через 250 пикселей после прокрутки от нулевого положения. При 0 кнопка вылезает сразу, как только страница начинает прокручиваться вниз. В этом случае надо поменять и второе условие if($(window).scrollTop()==»0″), вместо ==»0″ поставить <="250". А замедление прокручивания можно отрегулировать в этой строке .animate({scrollTop:0},"slow")})}});, вместо "slow" написать время в миллисекундах, я поставила 800, некоторые ставят меньше, некоторые больше. Тут можно задать скорость прокрутки, кому как хочется.

    Можете посмотреть у меня на сайте, как теперь кнопка работает 🙂

    [Ответить]

    Николай Коротков

    Юлия, вы такая молодец! Если бы все были такими настойчивыми, как вы… В общем, спасибо огромное за ваше стремление докопаться до истины и за то, что делитесь всеми полезными находками со мной и с читателями блога!

    [Ответить]

    Ответить
  18. Юлия:

    Пожалуйста! Знаете Николай, я теперь сама могу написать статью про кнопку наверх 🙂 , но у меня тематика блога другая 🙂 . Хотя себе заметки сделала, потому что всё забывается со временем.

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

    [Ответить]

    Николай Коротков

    Юлия
    Нет, такого списка у меня нет. Но, в данный момент я работаю над созданием очередного бесплатного курса по созданию и настройке блога, где вся последовательность будет учтена. Думаю, что уже в марте-апреле этого года я его выпущу.

    [Ответить]

    Ответить
  19. Юлия:

    Николай, это было бы очень здорово! Есть только маленькое пожелание — напишите, пожалуйста, к вашему видеокурсу какую-нибудь промостатью со списком того, что в этом видеокурсе будет рассматриваться. Статья может не принесет вам трафик с поиска, но поможет продвижению курса, мне кажется. Народ будет заходить с других статей. А какие возможности для перелинковки!
    Просто мне с текстом попроще, чем с видео, а вдруг не одна я такая..

    А smartresponder сейчас работает плохо, причем на многих блогах, уже не раз попробовала за последний месяц. Это просто факт. А что с этим делать, я не знаю.

    [Ответить]

    Николай Коротков

    Юлия
    У меня уже есть статья на тему «Как создать блог»! Туда я и планировал подшить видео курс. А так как статью придется все равно редактировать, то постараюсь учесть все ваши пожелания.

    [Ответить]

    Ответить
  20. Скачала плагин. Никаких изображений кнопочек в нем нет. В настройках только опции — текст, цвет текста, цвет кнопки. В активированном состоянии она появляется внизу, по середине страницы (а хотелось бы сбоку) 😥 Может плагин уже сильно изменился после обновлений? 😐

    [Ответить]

    Ответить

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

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

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.