Как сделать кнопку «Наверх» для сайта

Майские праздники закончились, и снова на связи блог Good SEO. Сегодня я решил рассказать вам, как сделать кнопку «Наверх» для сайта, которая появляется при прокрутке страницы вниз, ставшую популярной в последнее время.

Мне кажется, что нет необходимости рассказывать, для чего нужна кнопка «Наверх» для WordPress-сайта и любого другого. Ее предназначение заложено в самом ее названии — она переносит нас к началу страницы при нажатии на нее, что особенно удобно, когда читаешь большой пост либо у статьи много комментариев.

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

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

Начинающие пользователи не всегда рискуют лезть в код, чтобы добавить или изменить что-то. Им подойдет небольшой WordPress-плагин кнопки "Наверх", который называется Scroll to Top. Его вы можете установить через встроенный в панель администратора поиск плагинов. Для более опытных блоггеров внедрение кнопки возвращения наверх будет осуществляться с помощью скрипта.

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

Итак, приступим. В первую очередь необходимо скачать архив со следующими файлами: сам скрипт кнопки наверх verx.js и собственно сама картинка кнопки verx.gif. После этого распаковываем этот архив, файл verx.js копируем в корень вашего сайта — папку /public_html/, а файл verx.gif — в папку /public_html/wp-content/uploads/ или любую другую по вашему желанию.

Следующий шаг. Чтобы на сайте появилась возможность вернуться наверх при нажатии кнопки «Наверх», нам следует подключить к нашему сайту библиотеку jquery. Для этого мы открываем файл functions.php вашей темы либо в стандартном редакторе WordPress, либо в редакторе Notepad++ и  вставляем этот код в начало этого файла сразу же после открывающего тега <?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');
}

Если вы не станете подключать jquery, то при нажатии на кнопку «Наверх» сразу окажетесь в самом верху страницы. При подключенном jquery всё это произойдет красиво, с плавной прокруткой.

Теперь мы подключим саму кнопку. Открываем файл footer.php любым из вышеперечисленных способов и в самом его конце, прямо перед закрывающим тегом </body> добавляем данный код код:

<a id="toTop" href="#"><img src="http://site.ru/путь к картинке/verx.gif"
alt="" align="absmiddle" border="0" /></a><script type="text/javascript"
src="http://site.ru/verx.js"></script><script type="text/javascript">//
<![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
// ]]></script>

в котором:

  • http://site.ru/ — вместо этого вы вводите адрес вашего сайта;
  • /путь к картинке/ — точный путь к картинке.

Итак, последний шаг нашего урока. Открываем файл style.css, пролистываем его до конца и в самом низу вставляем этот код:

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

Теперь у вас есть возможность что-то изменить и настроить внешний вид и отступы так, как посчитаете нужным.

То, как будет выглядеть ваша кнопка, тоже достаточно легко можно изменить. Вы можете закачать новую картинку кнопки, только не забудьте поменять путь к ней в файле footer.php. Очень много разнообразных картинок для кнопки «Наверх» можно подыскать в Интернете. Также вы можете скачать 14 уже готовых вариантов в zip-архиве по этой ссылке.

Если вы умеете работать с графическими редакторами, такими как PhotoShop, вам не составит труда нарисовать кнопку самому.

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

 

Комментарии к записи “Как сделать кнопку «Наверх» для сайта” (47)

  1. Анатолий спасибо за информацию. Интересно было почитать.

    Раньше я пользовался плагином чтобы кнопка была.

    А сейчас уже без плагина. Ведь плагин это лишняя нагрузка.

    • Я не силен в JS, но в том файлике есть параметр «slow». Я думаю, что если заменить его другим значением, то возможно что-то получится.

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

  3. НУ ВО-ПЕРВЫХ, МАЙСКИЕ ЕЩЕ НЕ ЗАКОНЧИЛИСЬ, ВООБЩЕ-ТО ГЛАВНЫЙ МАЙСКИЙ ЗАВТРА-ДЕНЬ ПОБЕДЫ 9 МАЯ, ИЛИ ТЫ С ПРОТИВОПОЛОЖНОЙ ВЛАСТИ???

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

  5. Анатолий, а я по старинке пользуюсь плагином. Просто внесла туда нужную мне картинку и всё. Думаю, что лишней нагрузки на блог нет. То, что плагины сильно грузят блог — это правда отчасти. Всегда нужно учитывать, что лучше качественный плагин, чем не правильно написанный код. Так что лучше 50/50 соблюдать. Хотя кнопку можно бы и мне кодом заменить уже=)))

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

      • Надежда, я тоже встречался с такими темами, правка кода которых могла положить всё начиная от лица блога, заканчивая админкой.

  6. Как раз хотел написать статью на эту же тему 🙂

    Но моя статья выйдет после того как напишу о том как за 10$ можно привлечь «лишние» 100 подписчиков в свою базу, а потом напишу про кнопку «вверх». У меня скрипт похожий, но добавлю эффект «hover» что бы кнопка выглядела еще круче 🙂

    • Жду с нетерпением статьи про подписчиков! Может даже воспользуюсь советами. У меня до сих пор подписчиков нет практически.

  7. Привет Толик!

    Немного не в тему поста, но все же как там продвижения клиентского сайта в seohammer.ru есть результаты ?

    • Привет! Да как-то не очень пошло, я и прикрыл. Зато SeoWizard в Google поднял один классный запрос в ТОП-3 (ну это я так думаю, что SeoWizard, а там хрен его, может и сам вышел).

        • Ну клиентские я особо не двигал никогда еще, а свои у меня сами в ТОП по НЧ лезут, так что пока без надобности вообще что-то покупать. А вообще раньше закупал вечные в Ротапосте.

  8. Благодаря Вконтакте, на всех сайтах машинально тыкаю в левый край. Поэтому логично реализовать точно так, как реализовано Вконтакте.

    • А у меня нет такого. Привык, что у меня курсор находится справа, когда листаю.

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

  9. Надо будет и себе сделать кнопку вверх, и без плагина на denver установил плагин, а на хостинге попробую воспользоваться вашим способом))

  10. Анатолий, смущает только то, что файл verx.js надо кидать в папку /public_html/. Не люблю делать привязки к хостингу. Ведь у вас кнопка уже была встроена в шаблон? Значит именно в нем автор разместил все скрипты и картинку с кнопкой? Сам пока что пользуюсь плагином, но нашел еще один способ... Если получится сделать кнопку, то поделюсь информацией...

    • Ну вообще у меня в папке с темой есть папка js, это всё, что я могу точно сказать, т.к. как я уже говорил, не особо разбираюсь в JavaScript.

  11. Прописывать коды для меня непосильная задача, поэтому я предпочту наверно плагин. По поводу того, что большое количество плагинов замедляет загрузку страниц, пока не замечала, но у меня плагинов установлено немного, может поэтому пока с такой проблемой не сталкивалась. А сам кнопка очень удобна, когда статья большая.

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

  12. Спасибо за информацию!

    Сделала кнопочку.

    Но у меня она получаеться в самом низу сайта, а как сделать что бы она появлялась сбоку уже после 2-3 публикации.?.то как публикаций получаеться очень много

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

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