Кнопка вверх для сайта

Всем привет и удачных выходных! Сегодня у меня воскресенье, а у вас?

В этом посте мы узнаем как поставить кнопку » вверх » на сайт.

Это полезная штука, иной раз статьи бывают за 6000 знаков, а то и по 10000-12000, то есть прочитав такую надо будет раз 10 колесо мыши скрулить вверх, а это не пойдёт для посетителя. Ему юзабилити подавай, да и симпатичненько вроде.. Короче, главное чтобы костюмчик хорошо сидел.

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

Вы заметили как у меня? Что-то подобное сейчас будет у вас.

vverx1-7091884

Качайте себе этот архив>>>

в нём 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 — это размер нашей картинки, можете увеличить , уменьшить наверное уже нет смысла…

анекдот в тему:  simple-smile-6593375

Встречаются два еврея. — Как утебя дела? — Нормально, у тебя как? — Тоже хорошо, дом построил. — А сколько комнат? — Одна. — Ну правильно,… меньше и смысла нет.

  • background: #FEFFFE — цвет фона кнопки
  • border: 3px — бордюр, окантовка, можете сделать меньше
  • solid #cccccc — цвет окантовки(бордюра)

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

Кто не желает лезть в код и эксперементировать, кстати не у всех скрипт нормально работает. На некоторых шаблонах он скачет, а не плавно скользит. Надо библиотеку jQuery ставить. То есть просмотреть с официального сайта разработчика сделать файл и залить в корень сайта, тогда надо указать в header сайта загрузку. Короче морока, да и не советую в шапке лишние скрипты писать.

Поэтому рекомендую поставить плагин, и дело с концом.

Плагина два, простых

Но лучше всех

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

Но самый лучший это третий —  Back To Top  wpml_good-5853928  

Я себе поставил, убрал код и картинку, всё сделал плагином. Так же устанавливаете через консоль и заходите в настройки , то есть » Параметры «/Back To Top Settings

и выбираем картинку какая вам по душе

Если хотите свою картинку поставить, без проблем. По FTP — доступу зайдите в /ваш сайт.ru/www/wp-content/plugins/backtotop/img — папка с картинками и вместо какой-нибудь по вашему мнению не интересной картинки заливаете с таким же именем свою, она тут же отобразится в панели настроек плагина. И пользуетесь во всю…

На этом тема « Кнопка вверх для сайта » закончена.

Всем всех благ!  И до скорого!  wpml_bye-8127749