Всем привет!

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

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

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

Открываете, понравившуюся вам статейку на 5000-10000 символов, прочитав начало статьи, понимаете, что контент интересный и продолжаете читать дальше. Но дочитав до середины поста, вспоминаете, что упустили из виду один очень важный момент. Что делать? Возвращаться к началу. И тут начинаете наяривать колесико мышки до покраснения, чтобы вернуться в самое начало поста. Не знаю, как вас, а меня это малость напрягает.

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

Давайте рассмотрим два варианта вставки на ваш блог этой замечательной приспособы:
1. Кнопка вверх jquery. Установка при помощи специального скрипта.
2. Scroll to Top Plugin. Установка при помощи специального плагина.

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

Кнопка вверх jquery

Чтобы установить кнопку вверх при помощи скрипта jquery, вам потребуется скачать вот этот архив. В нем вы увидите два файла. Первый файл «top.js» — сам скрипт кнопочки, а второй файл «vverh.png» — ее изображение. Закачиваем эти файлы в корень вашего блога. В зависимости от вашего хостинга это будет или httpsdocs, или public_html (корневая папка вашего блога где хранятся все ваши файлы).

Я завел в корне своего блога отдельную папку files — куда поместил сам скрипт «top.js» и отдельную папку images — куда поместил «vverh.png». При написании постов часто требуется указать путь к тому или иному файлу, и чтобы все файлы не были в одной куче, для удобства используйте дополнительные папки, чтобы все было на своих местах. Если у вас их нет, советую завести, в дальнейшем пригодятся.

Теперь вам потребуется вставить специальный код в файл с темой вашего блога footer.php. При вставке кода через загрузчик на хостинге, некоторые темы WordPress почему-то некорректно отображают эти самые кнопки.

Поэтому лучше вставить код через административную панель (админку) вашего движка (я пользуюсь движком WordPress). Заходим в админ панель и переходим непосредственно к файлу footer.php (Внешний вид/Редактор/Подвал блога (footer.php)). Открываем его и вставляем в самом конце перед закрывающимся тегом </body> вот этот код:

<a id="toTop" href="#"><img src="https://mysait.ru/images/vverh.png" alt="« align=»absmiddle" border="0" /></a>
 <script type="text/javascript" src="https://mysait.ru/top.js"></script><script type="text/javascript">// <![CDATA[
 $(function() { $("#toTop").scrollToTop(); });
 // ]]></script>


После того, как код вставлен, не забудьте прописать вместо mysait.ru свое доменное имя. А также, если вы загрузили скрипт и картинку в другие папки, укажите правильный путь к ним.

Нажимаем кнопку «Обновить файл». У меня это выглядит следующим образом (кликните по изображению для увеличения):

кнопка вверх

C этим я думаю, разобрались. Идем дальше. Теперь нужно привязать к нашему коду таблицу стилей. Заходим в админку, открываем файл  style.css (Внешний вид/Редактор/Таблица стилей (style.css)) и вставляем в самом конце, после всех стилей, вот это код:

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


Нажимаем кнопку «Обновить файл».

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

Кнопка вверх для сайта устраивает вас в таком виде? Если да, оставляйте все как есть. Но если вдруг вы хотите, чтобы она функционировала по другому:

— плавный переход по странице, или ее еще называю плавающая;

— в самом верхнем положении страницы, она растворяется и становится невидимой;

необходимо подключить к нашему скрипту библиотеку jquery. Это делается следующим образом. Заходим в админку, открываем файл  functions.php (Внешний вид/Редактор/Функции темы (functions.php)) и вставляем в самом конце перед тегом:

?>

вот этот код:

// smart jquery inclusion
if (!is_admin()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
 wp_enqueue_script('jquery');
}


Нажимаем кнопку «Обновить файл». У меня это выглядит так (кликните по изображению для увеличения):

кнопка вверх

Все! Вот теперь мы имеем полноценную кнопку вверх!

Внимание для тех, кто совсем не разбирается в HTML/CSS: во избежание каких-либо проблем, настоятельно рекомендую вам перед правкой кодов, скопировать редактируемые файлы в отдельную папку на ПК. Чтобы в случае возникновения непредвиденных обстоятельств, вы всегда смогли вернуть все на свои места.

И еще один момент! Бывает такое, что кнопочка не вписывается в дизайн блога (не тот цвет, форма). В этом случае вы с легкостью можете скачать любое изображение в интернете, обработать его в графическом редакторе и загрузить тем же путем.

Только не забывайте указывать путь, менять название изображения и ставить правильное расширение файла (jpeg, gif, png). Это не должно составить у вас какого-то  труда. Если что-то не будет получаться, можете всегда оставить комментарий с текстом вашей проблемы или написать мне в форму обратной связи. Я всегда помогу.

Scroll to Top Plugin

Если уж вам совсем не хочется возиться с кодами шаблона! То для вас найдется другой вариант установки кнопки вверх, при помощи плагина Scroll to Top. Перейдите по этой ссылке и скачайте плагин к себе на ПК. Загрузите архив в папку с плагинами вашей темы через админ панель или хостинг, кому как удобно, мне удобней через админку (Плагины/Добавить новый/Загрузить/Обзор (указываем путь к плагину)/Установить/Активировать). Все готово!

Теперь нужно перейти в настройки плагина (Параметры/Кнопка вверх) и поиграться с такими настройками как «скорость пролистывания вверх (в миллисекундах)» и «после какой строки она должна появиться». После выставления нужных вам настроек, не забывайте нажать «Сохранить».

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

Вот в принципе и все, что я хотел вам сегодня рассказать. Для тех, кто не любит копаться в кодах: помните, что любой плагин, активированный на вашем блоге, дает приличную нагрузку на ваш сайт и при большом их использовании, ресурс может тормозить при загрузке. Лучше от плагинов избавляться, но решать вам, мое дело вас предупредить. В скором времени напишу еще один классный пост, подпишитесь на обновления моего блога и вы узнаете о выходе новых статей одним из первых!

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

— как установить смайлики;
— как установить аватар.

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

Как вам статья? А у вас имеется на блоге кнопка вверх? Как вы ее устанавливали? При помощи кода или плагина? Рад буду услышать ваши комментарии!

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