Урок 128. Как установить кнопку вверх на сайт или блог

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

Назначение кнопки Вверх

Многие знают, для чего нужна кнопка «вверх», но для тех, кто не в курсе, я расскажу в двух словах. Кнопку «вверх» устанавливают на сайте или блоге для того, чтобы можно было в любое время быстро вернуться к началу страницы. Такую кнопку Вы видели на многих сайтах и блогах. На некоторых сайтах вместо кнопки «вверх» можно увидеть ссылку, которая выполняет те же функции.

Как установить кнопку вверх: Плагин Royal Scroll to Top

Скачать плагин Royal Scroll to Top можно по этой ссылке: http://wordpress.org/plugins/rt-scroll-top/. Установите его и активируйте. Все, кнопка «вверх» готова к использованию. Плагин не требует никаких настроек.

Кнопка верх, плагин Scroll to Top Button

Скачайте плагин Scroll to Top Button по этой ссылке http://vk.cc/1VyBSP и активируйте. Как устанавливать плагины, описано в уроке 10. В принципе кнопка «вверх» уже установлена на блог, в чем Вы можете сами убедиться. Откройте на Вашем блоге любую статью и опуститесь немного вниз, после чего сразу появится кнопка. Щелкните по ней, чтобы чтобы проверить ее в работе.

Этот плагин имеет несколько настроек. В панели администратора перейдите «Параметры» -> «Scroll To Top» и настройте кнопку, как Вам больше нравится.

  1. link to your to top button image : ссылка на Вашу картинку кнопки.
  2. Scroll Speed (in milisecond): скорость прокрутки в миллисекундах
  3. The button appears after page scrolled down to line: задает, через какое время должна появиться кнопка на экране при скроллинге страницы вниз

Как установить кнопку «вверх» и "вниз" на сайт или блогг

После изменения настроек, не забудьте нажать «Update Settings» (обновить настройки).

По желанию, изображение кнопки можно легко изменить. Создайте новый файл, с любым названием, но расширением PNG, или изменить уже существующий. Найдите файл up.png по следующему пути: …/wp-content/plugins/scrolltotop/image/ и отредактируйте его в графическом редакторе. Если Вы создадите свою картинку с новым названием файла, то укажите это в настройках плагина.

Установка кнопки «вверх» и «вниз» с помощью скрипта

После установки скрипта, кнопка будет выглядеть, как на моем блоге. Скопируйте следующий скрипт

Теперь этот скрипт нужно добавить в файл footer.php перед закрывающим тегом </body>. Скрипт можно добавить и в файл header.php, но, так как в первую очередь загружается имеено этот файл, то на него должна быть минимальная наргузка. Советую добавлять скрипт именно в футер (footer.php). Прелести этого скрипта я даже записал на видео, чтобы и Вы могли оценить его.

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

Установка кнопки "вверх" в браузере Google Chrome: плагин Один клик вверх

Такую кнопку можно сделать, установив плагин «Один клик вверх» для браузера Google Chrome . Может и в других браузерах возможно такое осуществить, но в Mozilla Firefox я не нашел такого плагина, а в других не искал. После установки плагина (расширения) в браузер Google Chrome, Вы не увидите кнопки "вверх", т. е. Вы вообще ничего не увидите.

Но теперь Вы на любом сайте сможете одним щелчком мыши перейти в начало страницы. Для этого нужно подвести курсор мыши влево экрана до упора и щелкнуть левой клавишей. Установить плагин для Google Chrome можно по этой ссылке: . Плагин имеет рейтинг 5 звездочек, что говорит о его спросе.

Другие плагины для установки кнопки "вверх" и "вниз".

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

Smooth Scroll Up: плагин с легкими настройками и с рейтингом в 5 звезд.

MasterBlogster Scroll Top and Bottom: добавляет кнопки "вверх" и "вниз".

Simple Scroll To Top: этот плагин добавляет  кнопку "вверх" с плавной прокруткой страницы.

RRF Scroll to top: простой в использовании плагин, который можно установить за минуту.

Ax ScrollTo Top:  добавляет кнопку для перехода вверх страницы

Cudazi Scroll to Top:  еще один плагин, который заслуживает внимания.

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

36 Comments

  1. Спасибо!! Ты настоящий человек. Тысячу сайтов облазил чтоб поставить себе стрелку.Никак не получалось . А твои стрелки хорошо установились. Да еще вверх-вниз-пауза имеется.

  2. Можете посмотреть на http://fotobam.ru/foto_na_dokumenti.html
    Немного скорость прокрутки изменил.

    • Мне тоже эти кнопки нравятся как работают. Кстати, я и сам не мог долго установить кнопку вверх, потому что все не работали.

  3. Спасибо большое за скрипт кнопок!Все работает отлично.А нельзя ли как-то цвет поменять? А-то зеленый как-то не очень подходит к моему шаблону.Заранее спасибо!

    • Видимо цвет кнопок можно сменить, но я не разбираюсь в скриптах.

  4. Долго искал подобный скрипт, но нашёл только у Вас. Спасибо,Yuriy!!

  5. УРРРА!!! Наконец-то одним щелчком установила код! Несколько часов возилась, ❓ искала информацию, внедряла, а тут все так просто. ❗ Даже удивительно, почему же на других блогах описывается, сколько действий нужно проделать, чтобы получить эти кнопки, а здесь всего один код вставить…
    Вот было бы еще здорово, если бы Артем рассказал, как он изменил скорость прокрутки.

  6. Спасибо большое! Наконец-то установила эту нужную кнопочку! Теперь стало очень удобно!

  7. Установила такие же как у Вас стрелочки. Красиво конечно.

    Но терзают сомнения. Насколько это безопасно?
    В том плане что скрипты и картинки лежат на непонятных ресурсах.

    Что Вы лично об этом думаете?

    Виктория Крам
    • Виктория, картинки грузятся с фотохостинга “photobuket”, а сам скрипт взять не с интернет казино и не с порно сайта, так что можно не беспокоиться. Этот скрипт на многих блогах установлен.

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

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

  9. Добрый день, подскажите пожалуйста, а если установить предложенный скрипт на свой сайт, не будет ли адрес из этого скрипта для моего сайта как внешняя ссылка?

    • Наталья, эта ссылка будет считаться внешней, на скрипт без этого не будет работать

  10. Насколько я знаю, внешние ссылки это очень плохо для сайта. Ведь они мешают в продвижении 😐 как же быть?

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

  11. Спасибо, Юрий. Я попробовала поставить Вашу версию кнопки на поддомене и проверила потом его через DiNews. Внешнюю ссылку он не показал и меня это очень обрадовало ❗ Я решила поставить на свой сайт, зашла в панель а у меня куда-то пропал редактор стилей в панели внешний вид. Не знаю что и делать. Может вы знаете как его вернуть? Я писала на форуме сейчас, нашла там что это может быть из-за плагина Better WP Security. Проверила с ним вроде бы все в порядке. Не знаю в общем что делать?

    • Наталья, у Вас какие-то чудеса происходят! Даже не представляю, как мог пропасть редактор. :). Попробуйте отключить все плагины, и посмотреть, появился редактор или нет. Если редактора все равно нет – переустановите движок, должен появиться редактор. Только этот не редактор стилей, а встроенный редактор файлов WordPress.

  12. Да уж Юрий, чудеса так чудеса. У одной моей одногруппнице, тоже редактор пропал как раз таки из-за плагина Better WP Security, она потом его вернула. А другая сегодня обновила плагины nrelate и у нее вся админка пропала, белый лист только, хотя сам сайт, говорит, работает. Загадочные нынче плагины пошли, не знаешь что от них ждать. Я воспользуюсь Вашим советом, попробую завтра отключить некоторые из последних установленных плагинов. Может вернется ко мне мой беглец 😉 Движок что-то боюсь переустанавливать. Действовать нужно как хирург -главное не навредить. А то отрежу, да не то :mrgreen: Спасибо за советы, буду пытаться!

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

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

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

  14. Кнопки пропали, пришлось удалить скрипт, а жаль…

    • Кнопки снова появились. Даже если кнопки пропадут, скрипт вовсе не нужно удалять. Напишу урок скоро по этому скрипту

  15. Я уже нашла другой вариант кнопок, немного пришлось повозиться, но зато под мой блог они подходят больше…

    • Ольга, эти кнопки можно изменить под свой блог. Кнопки можно вообще нарисовать свои. Ну, если Вы нашли другие, то и обсуждать нечего 🙂

  16. Здравствуйте! Можно ли вставить скрипт кнопки вверх в футер, у меня там стоит скрипт SmartResponder, не будут ли они конфликтовать между собой? И не отразится ли это отрицательно на сайте? Спасибо.

    Зинаида
    • Здравствуйте еще раз! Будут ли конфликтовать скрипты или нет, можно узнать только после его установки. Так сказать трудно

  17. Здравствуйте! У меня на сайте в небольшом размере выведена карта Google. Как мне задать некую опцию чтобы по щелчку на какой-то (какой?) кнопке карта раскрывалась на весь экран, а при повторном щелчке она опять возвращалась в старое состояние? В Яндексе такая кнопка есть, а вот в Google не знаю. Подскажите пожалуйста. Заранее спасибо

    Наталья
    • Здравствуйте, Наталья! Ничем не могу помочь. Я даже не понял вопроса, о какой карте идет речь

  18. Выведена карта Черного моря (но может быть любой другой центр задан в скрипте)

    Наталья
  19. Все равно спасибо.

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

    • В этой статье, я предлагаю установить кнопку вверх без плагина

Leave a Reply

Яндекс.Метрика