Всем привет и удачных выходных! Сегодня у меня воскресенье, а у вас?
В этом посте мы узнаем как поставить кнопку » вверх » на сайт.
Это полезная штука, иной раз статьи бывают за 6000 знаков, а то и по 10000-12000, то есть прочитав такую надо будет раз 10 колесо мыши скрулить вверх, а это не пойдёт для посетителя. Ему юзабилити подавай, да и симпатичненько вроде.. Короче, главное чтобы костюмчик хорошо сидел.
Чтобы поставить сей элемент на сайт существует 2 варианта, первый это просто взять плагин и второй прописать в код и картинку загнать на хостинг. Про первый вариант я не буду распространяться. Это легко, а вот второй опишу, я себе так делал.
Вы заметили как у меня? Что-то подобное сейчас будет у вас.
Качайте себе этот архив>>>
в нём 2 файла
Эти файлы закидываем по FTP-доступу на наш сервер. Картинку забрасывайте в папку images. Скрипт verh.js — зри в корень ( Козьма Прутков) в корневой каталог блога. Короче говоря скрипт будет включать кнопку картинка котороя уже лежит на сервере.
далее наше действие, копируем вот этот код команды для скрипта
| Наверх $(function() { $(«#toTop»).scrollToTop(); }); |
Вместо текста «Наверх» прописываем адрес картинки 
нам нужно вставить его в тело сайта, то есть чтоб он был на каждой странице. Какие элементы присутствуют на каждой странице? Заголовок, сайдбар и подвал. Поскольку header.php мы и так освобождали для быстрой прогрузки сайта, то разумнее код будет поставить в подвал, footer.php
Ставим в подвал где-то между тегами в самом скрипте который скопировали, вместо слов
http://ваш_сайт.ru
ставьте свой url
Далее мы идём в консоль wordpress. Внешний вид/Редактор/ Таблица стилей(style.css) нам нужен файл style.css, как вы к нему доберётесь это уже ваше дело либо по FTP, либо через консоль.
и в самом конце кода этого файла вставляем в дополнение вот этот код
| #toTop { width: 29px; background: #FEFFFE; border: 3px solid #cccccc; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 0px; cursor: pointer; color: #666666; text-decoration: none;} |
- width: 29px — это размер нашей картинки, можете увеличить , уменьшить наверное уже нет смысла…
анекдот в тему: 
Встречаются два еврея. — Как утебя дела? — Нормально, у тебя как? — Тоже хорошо, дом построил. — А сколько комнат? — Одна. — Ну правильно,… меньше и смысла нет.
- background: #FEFFFE — цвет фона кнопки
- border: 3px — бордюр, окантовка, можете сделать меньше
- solid #cccccc — цвет окантовки(бордюра)
Итак, кнопка готова и заряжена. Теперь чтоб её увидеть обновите страницу и спускайтесь вниз скрулом. Вы можете поменять картинку на ту которая больше подходит для фона вашего сайта, а также поэкспериментировать с размерами и окантовкой. Удачи вам в экспериментах
Кто не желает лезть в код и эксперементировать, кстати не у всех скрипт нормально работает. На некоторых шаблонах он скачет, а не плавно скользит. Надо библиотеку jQuery ставить. То есть просмотреть с официального сайта разработчика сделать файл и залить в корень сайта, тогда надо указать в header сайта загрузку. Короче морока, да и не советую в шапке лишние скрипты писать.
Поэтому рекомендую поставить плагин, и дело с концом.
Плагина два, простых
Но лучше всех
Второй плагин чуток по сложнее, настраивать надо, берите первый если не хотите лишних движений. В первом всё просто и предлагается варианты кнопок Выберите один и ставьте как обычно через консоль.
Но самый лучший это третий — Back To Top 
Я себе поставил, убрал код и картинку, всё сделал плагином. Так же устанавливаете через консоль и заходите в настройки , то есть » Параметры «/Back To Top Settings
и выбираем картинку какая вам по душе
Если хотите свою картинку поставить, без проблем. По FTP — доступу зайдите в /ваш сайт.ru/www/wp-content/plugins/backtotop/img — папка с картинками и вместо какой-нибудь по вашему мнению не интересной картинки заливаете с таким же именем свою, она тут же отобразится в панели настроек плагина. И пользуетесь во всю…
На этом тема « Кнопка вверх для сайта » закончена.
Всем всех благ! И до скорого! 