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

 

Всем доброго времени суток, уважаемые читатели. Сегодня я расскажу вам, как сделать кнопку наверх на своем блоге.

Многие скажут, да зачем она вообще нужна, эта кнопка. Кому надо, тот и колесико мышки покрутит. Так то оно так, но есть пара нюансов.

Данная функция значительно упростит возврат посетителя в начало страницы, сократит время на прокрутку страницы, тем самым увеличит привлекательность (удобность, юзабилити) блога в глазах читателей. А значит, большее числи читателей будет возвращаться на страницы вашего сайта.

Посмотреть на мою кнопку вы можете, прокрутив страницу вниз. Она появится в правом нижнем углу (сейчас кнопка несколько изменилась в связи со сменой дизайна).

Как сделать кнопку наверх на вашем сайте

Существует несколько способов установки такой кнопки.

1) При помощи специального плагина Scroll to Top Button
2) При помощи различных HTML и CSS кодов и JavaScript

 

Как сделать кнопку наверх при помощи плагина

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

Итак, скачиваем плагин по ссылке на жесткий диск своего компьютера. Устанавливаем его на хостинг. Если вы не знаете как это сделать, я вкратце расскажу. Устанавливать плагины можно двумя путями: из панели администратора вашего блога, либо закидывая их в папку plugins вашего хостинга через FTP-клиент. Итак плагин вы, я надеюсь, установили и активировали. Теперь необходимо сделать некоторые настройки.

Идем во вкладку ПАРАМЕТРЫ — Scroll to Top и нажимаем на название плагина. Перед нами откроется меню настроек.

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

Второй пункт, который мы можем изменять – это скорость прокрутки. По умолчанию стоит 800 миллисекунд. Я этот параметр не изменял. И последний пункт – это строка, после которой будет появляться кнопка. Чем больше число стоит в этой графе, тем ниже надо опуститься по странице, что бы появилась кнопка наверх.

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

 

Как сделать кнопку наверх без плагинов

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

Разберем вариант с использованием JavaScript. Для этого необходимо скачать архив по этой ссылке. В архиве два файла: verx.gif и verx.js. Первый файл это изображение кнопки (оно может быть любым), второй – сам скрипт.

Закачиваем эти файлы на ваш хостинг, лучше в специально отведенные для этого папки. Далее код, представленный ниже, необходимо вставить в файл footer.php между тегами <body></body>. Можно конечно вставлять код и в header.php, но лучше не тормозить страницу загрузкой сразу большого количества скриптов.

<a id="toTop" href="#"><img alt="" src="http://site.ru/путь к картинке/verx.gif" 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>

Не забудьте заменить на свой путь до картинки и скрипта.

Далее открываем файл стилей вашего блога (style.css). Он находится в папке с вашей темой. Открывать его необходимо при помощи текстового редактора. В самом конце файла вставляем следующий код:

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

Вот и все, кнопка готова. Можете поэкспериментировать с параметрами стилей и подогнать кнопку под дизайн сайта.

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

С уважением, Данил Новоселов

 

Интересные темы:

Ставим на блог форму обратной связи
Как установить кнопки социальных сетей
Ставим на сайт поиск от Яндекса

 

 

34 comments к Как сделать кнопку «наверх»

  1. Полезная кнопка. особенно для сайтов с объемными статьями.

    • Согласен. Иногда на блоге статей настолько много, вниз уйдешь так далеко. А потом видиши «волшебную» кнопку. Одно нажатие и ты уже наверху! =)

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

  2. Данил, спасибо за кнопку. Без плагина. Сделаю сперва на тестовом, потом установлю уже у себя, чтобы не угроблять блог — есть у меня такой талант лезть везде. А то у меня и так 28  плагинов стоит. От одних избавляюсь — другие добавляю. Было 57 по началу. Все подряд устанавливала. Новичок ведь была.

    • Данил Новоселов:

      Пожалуйса. 57 плагинов это конечно многовато )))

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

    • Да, 57 плагинов — это круто! Да и 28 — многовато, я считаю.

    • Многие новички поначалу лепят по 50 плагинов, я и сам так делал, это нормально :) главное, что вы уже понимаете, что так делать нельзя.

  3. Ух, ты, как раз мне попалась эта статья вовремя. Хотя, если бы у меня не было кнопки на блоге, то ничего страшного, конечно же, не произошло. Можно и без этой кнопочки жить. Но теперь, благодаря этой статье, я буду знать, что и к чему. =)

     

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

  4. Creeper:

    Кнопка наверх для сайта очень полезна для сайтов где выкладывают огромные статьи

  5. У меня в новой теме Вордпресс эта кнопка уже стоит. Круто!

  6. Лилия:

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

    • Такой кнопочки еще не встречал :) Лилия, я думаю, Вы можете запатентовать свое изобретение :)

      • Ага и продавать по 100$ за штуку :)

        • Виталий!

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

          • P.S.

            Извините, но за мужественным лицом на граватаре может скрываться школьник, которому родители не дали денег для оплаты хостинга и даже женщина!

      • Очень часто стала встречать такие кнопки на сайтах «ВВЕРХ» и" ВНИЗ".  Можно сделать это при помощи плагина или без. 

        Но, лично моё мнение, одной кнопки «наверх» вполне хватит!!!

        Но, кому как нравится. И желательно, ставить такую кнопку справа. Так удобней.

      • Лилия:

        Вы, что смеётесь? На стольких блогах стоят кнопочки Вверх-Вниз.

      • Сергей!

        Вы слишком категоричны. Если Вы не встречали, то это не означает, что таких кнопок не существует. Просто Вам нужно чаще посещать сайты, где нет конкурсов комментаторов, зато есть кнопки «Вверх» «Вниз»

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

    • Не  вижу смысла ставить кнопку вниз,  это что-то с области абсурда :)

  7. Лилия:

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

    • Лилия:

       В некоторых шаблонах уже установлена кнопочка Наверх. Что, не надо лезть в коды.

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

  8. У меня два блога.

     На одном установлен  плагин  Scroll Top and Bottom  Версия 2.0, причём кроме кнопки «Вверх» я установил кнопку «Вниз»

     

    На другом кнопки установлены при помощи HTML  кода. Я думаю, чем воспользоваться окончательно

Добавить комментарий для Александр Иванович Отменить ответ

db972060