Доброго времени суток всем друзьям и читателям – Sozdaiblog.ru!
Тема сегодняшнего поста – «кнопка вверх для сайта».
Ни для кого не секрет, что на эту тему в Интернете было опубликована не одна 1000 статей, заметок и комментариев.
Даже я, на 22-ой день существования своего блога написал и запостил похожий материал. Если кому интересно, можете перейти по ссылки и взглянуть на него.
Помню в то время, на мой почтовый ящик пришёл не один десяток писем, в которых люди благодарили за этот релиз и спрашивали, как перенести стрелку вниз, которая на тот момент реализовывалась в правом верхнем углу сайта.
Но, как это бывает у многих, то опыта маловато, то лень возиться и т. д. Хочу попросить прощения, если на тот момент не оправдал чьих-то надежд.
С того дня прошло уже много времени, я многому научился, во многом разобрался и достиг тех вершин к которым стремился с самого первого дня в карьере блоггера.
Но каждый день у меня возникает чувство, как будто я что-то упустил или чего-то не доделал.
В связи с этим я решил разобраться со своими тараканами и частично вернуться к тому с чего всё и началось. У меня появилось непреодолимое желание заполнить все пробелы в своей работе и подчистить все хвосты, за которые меня не однократно тянули и тянут многие завистники и недоброжелатели.
А начать я решил, как раз с кнопки вверх для сайта, которая по просьбе читателей будет располагаться в правом нижнем углу.
Итак.
Как установить кнопку вверх для сайта.
Для начала Вам потребуется на Вашем сайте подключить библиотеку jQuery.
Многие разработчики современных шаблонов для WordPress, на радость своим покупателям стали делать это ПО-умолчанию, но куча бесплатных и старых тем до сих пор бродит по Интернету без такого функционала.
Поэтому, чтобы быть во всеоружии, переходим на официальный сайт разработчиков jQuery, скачиваем последнюю версию библиотеки и заливаем её на свой хостинг в любое удобное для Вас место.
Затем, открываем на редактирование файл header.php, который находится в папке Вашей активной темы оформления и между тегами <head> </head> вставляем следующий скрипт:
<script type='text/javascript' src='https://Путь к файлу/jquery.js'></script>
В скрипте, Вы должны указать ссылку-адрес (путь) до загруженного ранее файла библиотеки. Её Вы можете скопировать либо в файловом менеджере своего хостинга, либо в строке состояния FTP-клиента. Всё зависит от того, какой из способов загрузки файла Вы использовали.
Далее Вам потребуется ещё один файл, который будет отвечать за прокрутку страницы и работоспособность кнопки вверх для сайта. Скачать его можете тут. Выглядит он следующим образом:
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
Его, как и библиотеку jQuery, нужно залить на сервер в удобное для Вас место.
Вместе с этими файлами не забудьте закинуть туда же и само изображение Вашей кнопки или стрелки, кому, что больше нравится.
Теперь самое главное.
Открываем для редактирования файл footer.php. Он, как и header.php расположен в папке используемой темы оформления WordPress. Находим закрывающий тег </body> и перед ним вставляем следующую строку кода:
<div id="toTop"><img src="https://Путь к картинке/картинка.png" alt="Вверх" /></div><script src="<?php bloginfo(‘template_url’); ?>http://Путь к файлу/scroll.js" type="text/javascript"></script><script type="text/javascript"> $(function() { $("#toTop").scrollToTop(); }); </script>
В этой строчке Вы должны прописать ссылку-адрес (путь) до изображения кнопки вверх и того файла, который мы закачали на сервер после библиотеки jQuery. По-умолчанию он называется scroll.js.
Последним пунктом в нашей операции по реализации кнопки вверх для сайта, будет установка необходимых стилей оформления.
Для этого в последний раз посещаем папку с активной темой оформления и находим там файл style.css. Открываем на редактирование и в самом конце вставляем следующие стили:
#toTop {
position : fixed;
bottom : 20px;
right : 90px;
cursor : pointer;
}
Не забывайте сохранять и обновлять все редактируемые файлы на сервере.
После всех проделанных манипуляций открываем Интернет-браузер и чистим его кэш.
Следом заходим на свой сайт и радуемся полученному результату.
Если что-то пошло не так, не стесняемся и задаём вопросы в комментариях.
Надеюсь, что я загладил свою вину, и Вам понравилось данное решение.
На сегодня это всё. До новых встреч…
С уважением, Денис Черников!
- В2в что это простыми
-
Как сделать улётное горизонтально выпадающее меню?
-
Как выбрать тему для блога: 9 шагов
- Контрагент это простыми словами в продажах
- Брендинг это простыми словами
- Консалтинговая компания что это простыми словами
-
Жизненный цикл продукта: этапы разработки и тестирования
- Копирайтинг простыми словами
- Чат бот что это такое простыми словами
- Релевантный что это значит простыми словами
Приветствую. У меня есть уже надпись ” Вверх ” но хотелось бы что вроде вашей кнопки , можно как то поставить кнопку вместо надписи?
Здравствуйте!
Да, можно! Вставьте фото стрелки. В статье всё подробно написано!
А что-то народ особенно не спрашивает… Спрошу я тогда. Вы уже ж в курсе, Денис, что я совсем трудный ученик.
Суть вопроса — как можно узнать, подключена ли jQiery в теме, которой я пользуюсь, или нет? У меня несколько блогов и вот я как-то сомневаюсь, везде ли она подключена…
Что будет, если эта библиотека уже входит в код темы оформления, а я «залью» её еще раз?
Нужно просто исходный код посмотреть!
Денис, предыдущий коммент можно почти весь удалить Я нашла проблему: плагин wp-minify «блокировал» у меня соц. кнопку ВК и также скрипт на кнопку «вверх». Случайно почти нашла!
И таки-да — у вас опечатка в приведенном образце кода.
Там, где мы вставляем путь к файлу «скролл», после поля «src» идет блок ?php bloginfo; А он там не нужен, как мне кажется…
Светлана, Вы молодчина! У меня работает именно так, с таким кодом!
Благодарю, Денис! Вы так всё отлично объясняете, что даже самые чайнико-заварники разберутся!
Пожалуйста, Светлана! Стараюсь!
А мне, Денис, статья, которая появилась у Вас на 22 день существования сайта показалась гораздо проще для моего чайнико-заварникового понятия. И сегодня я специально хотела ее найти и сотворить на своем сайте кнопку «вверх», но нашла эту статью и даже немного испугалась, подумала, что той уже нет!..Особенно вот эта строчка «После всех проделанных манипуляций открываем Интернет-браузер и чистим его кэш.»…Сколько я уже делала манипуляций, а кэш никогда не чистила. Это сильно страшно??? У Вас есть статья о том, как это делать?
Здравствуйте, Наталья!
Старая статья на своём месте, просто немного изменился заголовок, а в новой просто ещё один способ установки кнопки, и как мне кажется намного проще, чем в первой!
Наталья, не в огорчение сказано, но научиться чистить КЭШ браузера надо было ещё за долго до создания сайта, так как забитый до отказа кэш замедляет загрузку Вашим браузером всех сайтов в Интернете!
Ой! Нашла… И я даже об этом у Вас и читала. Как говориться «прежде, чем дурить голову людям своими глупыми вопросами, нужно хотя бы немного поработать своими ленивыми мозгами»…
Нашли статью, или как кзш чистить?))))
Нашла статью, как кэш чистить. Возможно таким, как я и не стоит создавать свои сайты, не научившись изначально всем премудростям их создания. Иногда жутко неудобно показаться глупой, задавая тот или иной вопрос.Но, прочитав комментарии под вашими статьями, я поняла, что я еще не в последних рядах)))))
Ясно! Создавать сайты стоит, так как опыт приходит в процессе их создания! Задавать вопросы нужно, но только тогда, когда самостоятельно не получается найти ответ. А то у нас сейчас как, люди даже в поисковик забить фразу «Как постирать носки» не могут, а идут сразу вопросы задавать!