» » » Кнопка вверх и кнопка вниз. Скрипт для сайта на WordPress
logotip

Кнопка вверх и кнопка вниз. Скрипт для сайта на WordPress

Всем привет! Вы наверное заметили, что на seo-mayak.com появились кнопка верх и кнопка вниз для быстрой прокрутки страницы, а также кнопочка для чтения и пауза.

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

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

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

knopki vverh vniz

И вот наконец у меня дошли руки до установки кнопок вверх и вниз, но я бы наверное еще долго собирался, если бы не вебвизор (вебвизор — это инструмент Яндекс Метрики). Наблюдая за своими посетителями я заметил, что многие что-то ищут в нижнем углу экрана, где просто пустое место и не найдя закрывают страницу.

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

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

Если Вы пишите объемные статьи и у Вас до сих пор не установлены кнопки вверх вниз, то мой сегодняшний пост специально для Вас. Поехали!

Скрипт блока кнопок вверх и вниз

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

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

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

Став подписчиком блога seo-mayak.com Вы не только будете получать почтой мои новые статьи, но и сможете обращаться ко мне за реальной помощью, так что не упустите момент.

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

Итак, для начала нам потребуется подключить к сайту библиотеку jQuery,  как это делается читайте тут. Обязательно проверьте, файлы header.php и footer.php, возможно библиотека jQuery у Вас уже подключена, в таком случаи повторно подключать ее не надо.

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

Создаем новый файл с расширением .js и вставляем в него следующий код:

var mayak_arrows_my=100;
var mayak_tytime_arrows=5;
var post_mayak_go,stopwatch;
function mayak_lop_arrows(){
stopwatch=setInterval("mayak_scroll()",30);
}
function mayakhendr(){
clearInterval(stopwatch);
}
function mayak_scroll(){
post_mayak_go = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0,++post_mayak_go);
}
function mayak_the_highest_point(){
 try{
 if(window.pageYOffset!=undefined)
 return window.pageYOffset;
 return window.document.body.scrollTop;
 }catch(err)
 {
 try{
 return window.document.body.scrollTop;
 }catch(err2)
 {
 return 0;
 }
 }
}
function mayak_scroll_to_top(){
var mayak_copy_zoo =w indow.document.body;
var mayak_brake_by = mayak_the_highest_point();
window.scrollBy(0,-mayak_arrows_my);
var mayak_brake_stop = mayak_the_highest_point();
 if(mayak_brake_by>mayak_brake_stop)
 setTimeout("mayak_scroll_to_top()",mayak_tytime_arrows);
 else
 document.getElementById("mayak_down_img").style.display = "block";
 return false;
}
function mayak_down_arrow(){
var mayak_copy_zoo = window.document.body;
var mayak_brake_by = mayak_the_highest_point();
window.scrollBy(0,mayak_arrows_my);
var mayak_brake_stop = mayak_the_highest_point();
 if(mayak_brake_by<mayak_brake_stop)
 setTimeout("mayak_down_arrow()",mayak_tytime_arrows);
 else
 document.getElementById("mayak_down_img").style.display = "none";
 return false;
}
function slow_mayak_scroll(){
var seo_mayak_body = window.document.body;
var mayak_height = seo_mayak_body.scrollHeight;
var mayak_top = mayak_the_highest_point();
 if(mayak_top==0)
 document.getElementById("mayak_up_img").style.display = "none";
 else
 document.getElementById("mayak_up_img").style.display = "block";
 return false;
}
setInterval("slow_mayak_scroll()",100);
document.write('<div class="arrow"> <a href="#" onclick="return mayak_scroll_to_top()"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png" title="Наверх"></a><br /> <a href="#" onclick="mayakhendr();return false;"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png" title="Пауза"></a><br /><a href="#" onclick="clearInterval(stopwatch);mayak_lop_arrows();return false;"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/9265/135756646.0/0_9340e_c78087a3_S.png" title="Читать"></a><br /> <a href="#" onclick="return mayak_down_arrow()"><img border="0" width="40px" id="mayak_down_img" src="http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png" title="Вниз"></a></div>');

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

Свои картинки надо закачать на сервер в папку «images» (как закачивать файлы на сервер, читайте здесь), которая также расположена в папке с Вашей темой, а затем заменить URL картинок в коде.

Адреса картинок прописаны на самой последней строчке кода, вот URL картинки со стрелкой «Наверх»:

src="http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png"

Очередность картинок сверху вниз, т.е. первый адрес — стрелка наверх, второй — пауза и т.д.

Далее, открываем файл style.css и в самый конец вставляем стили для кнопок:

/*стили для кнопок вверх/вниз*/
.arrow {
position: fixed;
width: 64px;
right: -10px;
bottom: 115px;
z-index: 10;
}
.arrow img {
opacity: 0.3;
}
.arrow img:hover{
cursor: pointer;
opacity: 1;
filter: alpha(opacity=100);
}
/* Отключение отображение кнопок на мобильных устройствах */
@media screen and (max-width:760px){
.arrow{display:none;}
}

Вот в принципе и все, блок кнопок должен работать.

Как создать файл с расширением «.js»

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

Создать такой файл можно в бесплатном текстовом редакторе Notepad++, просто сохранив вновь созданный файл в вышеупомянутом расширении:

knopka vverh vniz1

Название у файла может быть любым, главное чтобы оно состояло из английский символов.

Итак, мы создали папку с названием «js» и файл с расширением «.js», а также скопировали в него код кнопок, но этого недостаточно, надо еще подключить файл к шаблону.

Как подключить файл с расширением «.js» к шаблону WopdPress

На самом деле ничего сложного нет в подключении к шаблону файла «.js» и в принципе сие действие ничем не отличается от подключения библиотеки jQuery или любого другого скрипта. Например:

Вариант №1:

<script  type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/Название файла.js"></script>

Вариант №2:

<script  type="text/javascript" src="http://Ваш домен/wp-content/themes/Название темы/js/Название файла.js"></script>

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

</body>

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

На сегодня у меня все. Как Вам статья?

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

Комментарии: 99

  1. Анна:

    Уже на многих сайтах вижу такие кнопки. И даже не раз ими пользовалась. Ставить их плагином не хочу. А кодами поставить — дело не плохое.

    Ответить
    • Виталий Кириллов:

      Тем более, что скрипт, добавленный в уже существующий файл xxx.js, не будет замедлять загрузку страницы.

      Ответить
      • dengiizine:

        Привет Виталий! Смотрел выдачу Яндекса по запросу подключения кнопок вверх-вниз. Ваша статья 3-я и она мне понравилась больше, чем те, что выше стояли. Тем более, у вас такой хороший функционал этих кнопочек!
        Хочу дополнить твою статью. Напиши, что «подключать файл с расширением «.js» к шаблону WopdPress» — обязательно. А то я все сделал до подзаголовка «Как создать файл с расширением «.js»» и думал, что работа закончена. Ведь у тебя так и написано.
        Начал писать тебе сообщение, в котором хотел спросить то, да се, но потом, ради эконимии времени подключил сам библиотеку кверри и сам скрипт. Все заработало!!!
        Но хочу позиционировать блок кнопок по своему, так как мне нужно. Это делается в стилях, как я знаю?

        Ответить
        • Виталий Кириллов:

          Да позиционирование делается в стилях.

          Ответить
          • Максим:

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

            Ответить
  2. Елена Картавцева:

    Интересная фишка, только мне как-то привычнее прокрутку колесиком мышки делать и читать текст. А текст, даже если он длинный, но интересный, посетители обязательно дочитают до конца.

    Ответить
    • Виталий Кириллов:

      Елена, многие уже привыкли к стрелкам.

      Ответить
      • dengiizine:

        Виталий, а ссылки на картинки из яндекса будут индексироваться? По идее, они в папке шаблона лежат, а она закрыта в роботсе… Просто лень искать другие и заниматься переделкой кода…

        Ответить
        • Виталий Кириллов:

          Картинки от индексации не закрывают.

          Ответить
  3. Юлька:

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

    Ответить
    • Виталий Кириллов:

      Просто надо было сбросит кеш.

      Ответить
  4. Юлька:

    Сейчас прошло время, и все само заработало=)
    Стало, как у Вас в правый угол (а не в левый как было).
    Только у меня такая вот беда теперь: у меня установлен синий фон для сайта, и кнопочки встали прямо на него, и там практически не видны. Посмотрите, пожалуйста тут: http:// words-and-money.ru/
    МОжно ли как-то их сместить ближе к центру?

    Ответить
    • Виталий Кириллов:

      Дело в том, что размеры мониторов у всех разные. Например у меня монитор 19 дюймов и стрелки смотрятся замечательно, а если их сместить в право, то они залезут на сайдбар.
      Сместить можно, для этого в стилях надо изменить значение селектора:
      [php]right: -10px;[/php]
      Но думаю это делать не стоит.

      Ответить
      • Юлька:

        Понятно. Спасибо за объяснение. Ну раз говорите, что на моем сайте они нормально смотрятся, то пока так и оставлю. Здорово, что все-таки получилось)))

        Еще один вопрос: вы пишете, что если библиотека jQuery уже подключена, то ее повторно подключать не надо. А как узнать, включена она или нет?
        В коде должен быть точно такая же строка (если уже включено) «»
        Или она может по другому выглядеть?

        Ответить
        • Виталий Кириллов:

          Есть простой способ проверить. Просто не подключайте библиотеку и посмотрите будут ли кнопки отображаться.

          Ответить
  5. Искандер:

    Нужны ли подобные кнопки вообще? На клавиатуре есть 2 кнопки для осуществления этих функций 🙂 Стои ли сайт грузить?

    Ответить
    • Виталий Кириллов:

      Ну кому как, наверное. Некоторые к ним сильно привыкают.

      Ответить
  6. Анастасия:

    Виталий, ваш сайт — просто находка для меня! Всё понятно и доступно! Класс!!!

    Ответить
    • Виталий Кириллов:

      Анастасия я рад, что мой труд оказался для Вас полезен!

      Ответить
  7. est:

    Спасибо. Актуально

    Ответить
  8. Айна:

    Виталий, я сделала как вы говорили (подключила библиотеку, нашла папку в шаблоне с названием «script.js», вставила в него ваш код,вставила еще один код в стили). Вроде бы все получилось, но:
    1) при приближении курсора к кнопкам вместо слов «наверх», «вниз», «читать» получаются козяврики.
    2) при загрузке страницы кнопки вначале появляются в левом верхнем углу, а потом уже перемещаются направо вниз.
    Посмотрите, пожалуйста. Что делать???

    Ответить
    • Виталий Кириллов:

      Кракозябры получаются из-за неверной кодировки файла. Задайте для созданного файла кодировку utf8.

      Ответить
  9. Айна:

    Козяврики мне удалось убрать просто убрав сами слова в файле с Js. Теперь ни козявриков, ни слов. А вот вторая проблема все еще стоит — при загрузке страницы кнопки становятся видны вначале в левом верхнем углу, а потом уже перемещаются куда положено.

    Ответить
    • Виталий Кириллов:

      Сбросьте кеш браузера.

      Ответить
  10. Анна Вечеря:

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

    Ответить
    • Виталий Кириллов:

      Для начала почистите кэш браузера.

      Ответить
      • Анна Вечеря:

        Все вышло! не получалось не из-за кэша, а из-за моей невнимательности! 🙂

        Ответить
  11. Анастасия:

    Виталий, подскажите, пожалуйста! Вставила блок кнопок без проблем, всё получилось, но через некоторое время при наведении курсора на блок вместо «наверх» появляется «?????» При этом кнопки работают. В чем может быть дело?

    Ответить
    • Виталий Кириллов:

      Анастасия, у Вас все прекрасно работает.

      Ответить
      • Анастасия:

        Виталий, работает-то работает. Но почему вместо надписи «наверх» при наведении курсора на кнопку появляются символы «????» Это что-то с кодировкой у меня? Или дело в другом? Сначала всё нормально было…

        Ответить
        • Виталий Кириллов:

          Анастасия, поменяйте кодировку файла на UTF8.

          Ответить
  12. Vlad:

    Здравствуйте, после всего проделанного — стрелки просто стоят в подвале! Как быть?

    Ответить
    • Виталий Кириллов:

      Попробуйте сбросить кеш браузера и все должно заработать.

      Ответить
  13. Vlad:

    И еще один мой вопрос! Как снизить скорость прокрутки страницы при чтении?

    Ответить
  14. Виталий Кириллов:

    Чтобы снизить скорость прокрутки в режиме чтения, увеличьте задержку в миллисекундах в строчке:
    [php]stopwatch=setInterval("mayak_scroll()",30);[/php]
    Где число 30 как раз интервал задержки.

    Чтобы увеличить скорость прокрутки страницы в режимах вниз и наверх, увеличьте числовое значение в строчке:
    [php]var mayak_arrows_my=100;[/php]

    Ответить
    • Vlad:

      Спасибо большое!

      Ответить
  15. Рашида Гарифулина:

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

    Ответить
    • Виталий Кириллов:

      Спасибо Рашида!

      Ответить
  16. Max Vazovskii:

    Спасибо огромное! хоть и новичок я в этом деле — а получилось с первого раза.норм статья! СПС)))

    Ответить
    • Виталий Кириллов:

      Пожалуйста Max, пользуйтесь!

      Ответить
  17. Дмитрий:

    Здравствуйте! Убрал плагин кнопок, после обновления он стал конфликтовать. Решил обойтись без него, но сколько не старался не получается, подключить кнопки. Вроде делаю всё правильно, но постоянно выдаёт » отключен от сервера», не пойму в чём причина? Помогите советом!!!

    Ответить
    • Виталий Кириллов:

      Дмитрий, в смысле сайт перестает работать?

      Ответить
  18. Дмитрий:

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

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Дмитрий:

        Форма подключения: Вариант №2: Что такое /Название темы/, чем это заменить.

        Ответить
        • Виталий Кириллов:

          Дмитрий, название темы — это название вашего шаблона. Вписываете название и все. И еще Дмитрий, если не заработает, то попробуйте подключить скрипт в шапке сайта перед закрывающим тегом:
          [php]</head>[/php]

          Ответить
  19. Дмитрий:

    Виталий, всё не могу успокоится, просидел большую часть вечера — нечего не получилось. Пробовал уже разные варианты, безрезультатно! Может можно как то с Вами связаться и решить эту проблему? Мне было бы удобно через «скайп».

    Ответить
    • Виталий Кириллов:

      Дмитрий, у Вашего e-mail, который вы указали при подписки на обновления блога, значится статут, как «Непроверенный»! Исправите статус и напишите мне через форму обратной связи.

      Ответить
  20. Павел:

    А попроще нельзя?
    Хотелось бы описание как сделать простую кнопку «вверх» с плавной прокруткой.

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

    А у меня ничего не получилось! Хотя до этого поставила на свой сайт много других скриптов, и все успешно. А этот не отображается даже косо. вообще ничего на сайте не изменилось.

    Ответить
    • Виталий Кириллов:

      Юлия, значит где-то Вы допустили ошибку. Частая ошибка — не правильное подключение скрипта.

      Ответить
      • Юлия:

        Уже разобралась, работает. Просто пришлось создать новый файл .js — когда добавляла в старый ничего не выходило.

        Ответить
        • Виталий Кириллов:

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

          Ответить
  22. Андрей:

    Виталий! Огромное спасибо!
    Заработало всё сразу. Объяснение понятное.
    Я, хоть и начинающий, всё сделал буквально за 10 минут!
    Ещё раз СПАСИБО!

    Ответить
    • Виталий Кириллов:

      Пожалуйста Андрей, рад видеть Вас на блоге!

      Ответить
  23. Андрей:

    Виталий, добрый день!
    Похоже, что после последнего обновления WP до версии 3.9.1, столкнулся с такой проблемой: все ваши доработки (форма обратной связи, кнопки «вверх-вниз», хлебные крошки и пр.) исчезли. Видимо затерлись обновлениями. Но, перед этим несколько апдейтов прошли нормально. Почему это случилось и как этого избежать в будущем? Я уже и забыл, что я там за все время настраивал. Обидно!
    Были ли у кого-то подобные проблемы?
    Спасибо.

    Ответить
    • Виталий Кириллов:

      Андрей, все мои, как вы говорите, доработки, были произведены в файлах шаблона, которые не затрагиваются при обновлении WordPress. Вы случайно шаблон не обновляли?
      В любом случаи, надо обязательно делать бэкап всех файлов, с помощью FTP клиента FileZilla или с помощью плагинов. Этим Вы избавите себя от многих проблем.

      Ответить
      • Андрей:

        Виталий, спасибо за ответ. Совершенно не пытался вас поддеть словами «ваши доработки»:)Я к вам не с претензиями, а за помощью. Просто хотел понять в чем дело. А вы совершенно правы. Вышло обновление стандартной темы и я ее обновил. Значит в этом дело? Все бэкапы есть, но проблему заметил не сразу и делал несколько публикаций после обновления.

        Ответить
        • Виталий Кириллов:

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

          Ответить
  24. Александр:

    Всё работает.Спасибо.

    Ответить
  25. Пиполанка:

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

    Ответить
    • Виталий Кириллов:

      Странно Пиполанка, что с вашей тягой к экспериментам, Вы до сих пор не овладели языком CSS. Это ведь самый простой язык! Я намеренно не буду отвечать на Ваш вопрос, так как ответ в принципе лежит на поверхности.

      Ответить
      • Пиполанка:

        У меня много «хоббей», поэтому все знания поверхностны. Меня не хватит на то, чтобы освоить CSS — для это нужны уроки и систематизация данных, а множество других интересов не способствуют усидчивости. Сегодня работаю, а вот завтра обязательно поищу ответ на этот вопрос. Опять день угроблю — ищу одно, но по пути встречаю массу интересного — и во всем нужно разобраться, до всего (а иногда и до всех) докопаться.
        P.S. Ну вы меня и обозвали! )))

        Ответить
        • Виталий Кириллов:

          Сори, это просто опечатка, уже исправил) Базовые знания все равно должны быть, иначе вообще зачем заниматься экспериментами! Есть бесплатные курсы и усидчивость тут не причем, тут интерес важен!

          Ответить
          • Пиполанка:

            Мои эксперименты — не от желания обзавестись знаниями, а от любопытства (как у ребенка), когда возникший вопрос создает пустоту, для заполнения которой я и ищу ответы. Когда заводила сайт, вообще не знала, что такое php, скрипты, но пришлось разбираться. А всякие курсы — это так долго! Это дни и дни, я не могу столько времени акцентироваться на одном интересе. Не могу я бросить все остальное и быть только программистом. Да и работа эта, высасывает все вдохновение, остатки которого идут в блог. Блин, даже брюки сшить некогда.

            Ответить
            • Виталий Кириллов:

              Ну тогда я Вам не завидую! Так и будите скитаться по разным сайтам в поисках информации, которая заполнит пустоту и потратите больше времени, чем на просмотр курса из 30 — 40 видеоуроков. Дело Ваше конечно, но я за Вас эксперименты проводить не буду.
              Информация к размышлению:
              width — ширина;
              height — высота.

              Ответить
      • Пиполанка:

        Вашим вызовом вы решили отбить у меня тягу к экспериментам? Вам это удалось. Два часа мучила style.css, теперь месяц не захочу ковыряться с этими кодами.
        Увеличила кнопку. В style.css вставила .my_button {width: 60px; height: 60px; }, в файле js перед тайтлом картинки прописала class=»my_button». Надписи пришлось убрать — все равно их не видно.

        Ответить
  26. Владимир:

    Здравствуй Виталий! Отличная статья! Мне кнопки понравились, я установил на блог. Скрипт и стили вставил header.php активированной темы перед закрывающим тегом . Выровнял под свою страницу, всё работает. Мой блог куда установил кнопки info21v.ru

    Ответить
  27. Наталья:

    Виталий, в очередной раз меня выручаете! Спасибо за статью! Поставила кнопочки, все работает))

    Ответить
    • Виталий Кириллов:

      Я рад Наталья, что у Вас все получилось)

      Ответить
  28. Александр:

    Никак не получается вставить скрипт. прописал все как написано, но ничего не выходит, кнопки не появляются на странице

    Ответить
  29. Александр:

    Ура! всё получилось, сам изначально кое-что пропустил, теперь исправил и радуюсь. Спасибо за код !

    Ответить
  30. Сергей:

    Спасибо за скрипт, Виталий! Все получилось с первого раза!

    Ответить
  31. Алекс:

    Спасибо за скрипт, все получилось классно с первого раза. Перерисовал кнопы — вообще классно вышло. Одно меня интересует где в файле js уменьшить скорость движения страницы в режиме «Чтение»?

    Ответить
  32. Артем:

    Виталий, добрый вечер! А подскажите, возможно ли сделать, чтобы эти кнопки выводились на всех страницах кроме главной? Спасибо.

    Ответить
    • Виталий Кириллов:

      Думаю можно! Надо подключить скрипт через файл functions.php и прописать условие

      if(!is_home()){
       //подключение скрипта
      }
      Ответить
  33. Александр Силиванов:

    Добрый день, Виталий! Поставил в новую тему Ваш скрипт кнопок. Только картинки себе на хостинг загрузил. Могу, если желаете, пропиарить 🙂 Разных вариантов кнопок «вверх — вниз» видел в интернете немало. Ваш считаю самым удобным. А рубрика про Вордпресс есть и у меня на блоге, хотя там пока всего одна статья.
    У меня тут еще к Вам вопрос будет, не по теме статьи. В код вылазит откуда-то скрипт счетчика Гугл Аналитикс, причем «кривой» — с обилием слешей. И счетчик давно переустановлен. И тему все же сменил. А скрипт все равно вылазит. Понятно, что источник — не файлы темы. Но вот где, скорей всего, могли этот скрипт «прописать» мои «кривые ручки»? Не можете предположить, где искать?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр!
      Посмотрите в настройках плагина All in One SEO Pack, хотя конечно я не уверен, что в этом причина, но проверить надо.

      Ответить
      • Александр Силиванов:

        Добрый день, Виталий!
        В самом деле, некий код был вписан в графу Google Analitics ID. Убрал его, убрал галочку Расширенные настройки аналитики Включить. Исчезли только слеши — сам скрипт остается. Но у меня скрипт счетчика гугл в файле footer. Выводится, соответственно, в «подвале». Статистика работает, вроде все в норме. Придется разбираться дальше.

        Ответить
  34. Андрей:

    Отображаються кнопки в подвале и никуда не хотят сдвигаться. Что не так? Кэш сбрасывал несколько раз.

    Ответить
  35. Павел:

    Добрый день, Виталий!
    Какие стили в файле style необходимо прописать для мобильных устройств?

    Ответить
  36. Алекс:

    Обратил внимание, что при прокрутке страницы вниз до конца и с последующим постепенным возвращением наверх колесиком мыши или клавишами, стрелка «вниз» никак не возвращается на место.
    То есть если я прокрутил страницу до конца, потом вернулся назад на несколько страниц и понял что мне нужно обратно в низ, то кнопки со стрелкой вниз я больше не вижу. )

    Ответить
  37. Анастасия П.:

    Здравствуйте. Очень интересный материал, долго искала оптимальный вариант, опробовала его на своем новом блоге очень понравилось все просто и работает без проблем.

    Ответить
  38. Наталья:

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

    Ответить
    • Виталий Кириллов:

      Наталья, в стилях за прозрачность отвечает селектор:

      opacity: 1;

      Значение меняется от 0 до 1, т.е. если сделать 0.5, то кнопки будут полупрозрачными.

      Ответить
      • Наталья:

        Спасибо!

        Ответить
  39. Наталья:

    Виталий, доброго дня! Спасибо за полезный контент)
    Сделала все по инструкции, но кнопки не появились.
    Почистила кеш, открывала в разных браузерах, не помогло.
    Сайт на WP. В чём может быть причина?

    Ответить
    • Виталий Кириллов:

      Возможно вы путь до файла со скриптом указали не правильно.

      Ответить
      • Наталья:

        По инструкции все делала. Имя вписала. Поместила новый файл .js в папку js. Скрипт размещала и в header и в footer. Оба скрипта попробовала.
        Кнопок нет.
        Мне ваш вариант кнопок нравится больше других, жаль.

        Ответить
        • Виталий Кириллов:

          Наталья, трудно назвать точную причину, но скорее всего где-то ошибка. Все должно работать!

          Ответить
  40. Александр:

    Здравствуйте Виталий. Вчера устанавливал кнопки, все работало.Сегодня куда то пропали, не подскажите почему? Я даже не привязывал библиотеку.Что значит Название файла.js

    Ответить
  41. Александр:

    Решение нашлось такое. Настройки чтения,На страницах блога отображать не более 7 и кнопки появились. Отлично!У вас на блоге много полезного.что я хочу применить у себя.

    Ответить
    • Виталий Кириллов:

      Я рад, Александр, что у Вас все получилось.

      Ответить
  42. Александр:

    Здравствуйте,Виталий. Столкнулся с такой проблемой.Стояли кнопки, а потом пропали.Все скрипты на месте, созданный файл на месте, его я переделывал даже. Кнопки не появляются. Не подскажите причину?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр!
      Проверьте правильность подключение js файла.

      Ответить
  43. Сергей:

    Поставил скрипт в футер сайта ucoz но кнопки всегда отображаются в том блоке в котором установлен скрипт. Как правильно установить скрипт на сайте ucoz

    Ответить
  44. Павел:

    Отличное решение и это действительно очень удобно. Сделал кнопки как у вас. Вроде не плохо получилось. 🙂 web-klik.ru
    Вот только на мобильных устройствах много места эти стрелки занимают. Как это скажется на юзабилити сайта на мобильных устройствах? Ведь с них сейчас заходят большое количество посетителей. На компьютере отлично выглядят кнопки не спорю. А вот на мобильном на мой взгляд громоздко. Может есть решение отключить эти кнопки для просмотра на мобильных устройствах? Было бы не плохо. Виталий, вы не знаете как это сделать?

    Ответить
    • Виталий Кириллов:

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

      Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS