Как сделать на сайте кнопку вверх
Здравствуйте, дорогие читатели блога!
Уже несколько недель я замечаю, что на многих сайтах и блогах нет кнопочки «наверх».
А ведь она очень нужна многим читателям. Я провел опрос. Заглядывал на блоги и сайты и связывался с админами. Спрашивал у них, почему у них нет такой кнопки. 60% ответили, что не знают как ее сделать, 30% ответили, что сделают ее в будущем, 10% ответили, что не понимают зачем она нужна.
Если у вас еще нет такой кнопки, то вы плохо относитесь к своим читателям. Читаем дальше и выясняем зачем такая кнопочка нужна. А также устанавливаем себе на сайт.
Зачем нужна кнопочка «наверх»?
Бывает, что статьи на сайте получаются очень длинными. Из-за этого приходится долго крутить колесико мышки. И многих читателей это раздражает. В том числе и меня :)
Делаем кнопку на сайте.
Я покажу вам 2 способа. Первый способ подходит только, если у вас стоит CMS WORDPRESS.
Второй подходит на все остальные CMS, в том числе и на простые сайты без CMS.
Способ № 1
1.Скачиваем плагин Ultimate Back To Top Button
2. Загружаем его на сайт и активируем.
3. Заходим в админ панель и находим плагин.
4. Настраиваем.
5.Сделайте все как на рисунке или настройте кнопку под себя. Можете поменять цвет кнопки, текста, а также текст внутри кнопки. И нажмите «сохранить изменения»
Вот и все кнопка уже на сайте!
Способ № 2
Этот способ подходит для любой CMS, в том числе и для WordPress.
Ничего трудного в этом способе нет, просто читайте внимательно, что когда и где делать.
Шаг 1
Если у вас на сайте еще не подключена библиотека JQuery, то нужно ее подключить.
Объясню зачем нужно подключать эту библиотеку.
Если у вас не будет подключена библиотека JQuery, то кнопка вверх будет отображаться всегда, даже когда вы в самом вверху сайта. Это очень не красиво. А нам надо, чтобы она появлялась, когда мы внизу сайта.
Также без этой библиотеки переход с кнопки будет очень резким.
Думаю, что я вас убедил в необходимости библиотеки.
Чтобы подключить библиотеку jQuery к сайту, необходимо выполнить следующие действия:
- Для Joomla находите файл index.php и вставляете код между тегами <body> </body>. Вставляйте перед самым </body>
- Для WordPress находите файл header.php и вставляете код.
- На всех остальных CMS вставляете код между тегами <head> </head>
Сам код:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js»></script>
Данный код подключает библиотеку JQuery с Google.
Шаг 2
Скачайте этот архив. Распакуйте его. В нем 2 файла.
Картинка bloogit.gif и скрипт bloogit.js. Закиньте их себе в корневую папку сайта. Корневая папка обычно public_html и httpdocs.
Многие хостинг провайдеры предоставляют возможность загрузить файлы через панель управления, если нет, то придется вам научиться пользоваться программой Filezilla.
Вы можете выбрать другую картинку. Вот вам архив картинок. Выберите любую понравившуюся и закачивайте вместо bloogit.gif
Шаг 3
Теперь нужно вставить вот этот код себе на сайт:
<a href=»#» id=»toTop»><img src=»http://ваш_сайт/полное название картинки вместе с расширением» /></a>
<script src=»http://ваш_сайт.ru/bloogIT.js» type=»text/javascript»></script>
<script type=»text/javascript»>
$(function() {
$(«#toTop»).scrollToTop();
});
</script>
Для кнопки вверх Joomla
Найдите файл index.php и вставьте между тегами <body></body>. Желательно в конце перед </body>.
Для кнопки вверх WordPress
В админ панели зайдите на вкладку «Внешний вид»——«Редактор». И вставьте код в файле footer.php между тегами <body></body>. Лучше в конце перед </body>
Для всех остальных cms
Ищите файл index.php или home.php и вставляйте в конце.
Шаг 4
Добавляем стиль нашей кнопке. Для этого идем в таблицы стилей. Обычно style.css. Спускаемся вниз и прописываем данный код:
#toTop {
width: 100px;
right: 10px;
padding: 5px;
bottom: 10px;
position: fixed;}
Также можете немного поэкспериментировать со стилями.
Ну вот и все! Обновите страницу своего сайта и любуйтесь красивой кнопкой.
Супер- поставлю себе. Уже на столько привык что в ВК есть эта кнопка что без нее уже на других сайтах разражает ее отсутсвие. Спасибо автору.