Кнопка вверх для сайта и блога WordPress
Сейчас на многих сайтах и блогах Вы можете увидеть кнопку вверх, которая появляется при прокручивании сайта вниз. Впрочем, она не выглядит, как кнопка. Скорее, это картинка в виде стрелки, направленной вверх, или в виде ракеты. Других вариантов я пока не видел, но в принципе, картинка может быть любой.
Как выглядит кнопка вверх у меня, Вы можете посмотреть, прокрутив чуть ниже мой блог — эта кнопка появится в нижнем правом углу.
И когда Вы нажимаете на такую картинку, сайт плавно идет вверх до упора. А значит, Вам не нужно поднимать вверх бегунок прокрутки, или крутить колесико мыши, чтобы добиться такого же результата.
Для пользователей это несомненное удобство, особенно если статья длинная, а вернуться к началу статьи все же хочется.
Рассмотрим два варианта установки такой стрелки.
Установка кнопки наверх с помощью плагина
На блоге WordPress это можно сделать с помощью плагина Scroll to Top. Для этого установите плагин у себя. Установка самая обычная: заходите в административную панель своего блога, выбираете Плагины — Добавить новый, в окошке поиска вбиваете название плагина, и нажимаете кнопку Найти. Установите плагин, и активируйте его. Не забудьте только перед этим сделать бекап блога. Впрочем, бекап желательно делать перед любым изменением в движке, вроде обновления версии или установки любых плагинов.
В принципе, на этом установка заканчивается — плагин начинает работать и кнопка в виде стрелки появляется. При желании Вы можете поставить вместо стрелки свою картинку, только проследите, чтобы она была с прозрачным фоном. Некрасиво будет, к примеру, если у Вас полетит вверх ракета в белом прямоугольнике.
Чтобы установить свою картинку, разместите ее на хостинге, и после этого в пункте Ссылка к изображению кнопки пропишите путь к Вашей картинке. Выглядит путь примерно так: http: //vashblog.ru/papka/papka/kartinka.gif
То есть все входящие папки указываются через слэш, а в конце прописывается название картинки.
После этого Ваша картинка появится на месте кнопки вверх, вместо стандартной.
Установка кнопки наверх без плагина
Вариант с плагином прост и удобен, но если Вы не хотите на блог добавлять лишний плагин, или у вас вообще не блог WordPress, а другой сайт, то можно обойтись и без плагина.
Для начала нужно подключить библиотеку jQuery. Это файл, который называется jquery.js. Некоторые темы WordPress его уже имеют, и если это так, то Вам его нужно найти. Если в теме Вашего блога такого файла нет, значит, нужно его ставить. Заходите на официальный сайт разработчиков jQuery, нажимаете Download, затем и скачиваете последнюю версию этой библиотеки. Можно скачать сжатую или несжатую версию, они равноценны. Выглядят они так:
- Download the compressed, production jQuery — сжатая версия
- Download the uncompressed, development jQuery — несжатая версия.
Как правило, в браузере они открываются в виде кода. В таком случае Вам нужно будет создать пустой файл jquery.js, и поставить в него код. Пустой файл можно сделать следующим образом: открываете блокнот, и сохраняете пустой документ как текстовый файл. Затем переименовываете его и делаете нужное расширение.
После этого размещаете на хостинге в любом удобном для Вас месте.
Затем в административной панели блога заходите в пункт Внешний вид — Редактор, находите Шапку, то есть файл header.php, и прописываете перед закрывающим тэгом </head> следующую строку кода:
<script type='text/javascript' src='http://Путь к файлу/jquery.js'></script>
В этой строке Вы указываете свой путь к загруженному файлу jquery.js.
После этого Вам придется скачать еще один файл, scroll.js, который отвечает за работоспособность кнопки вверх. Скачать файл Вы можете по ссылке:Скачайте и разархивируйте его. Этот файл Вам тоже нужно разместить на хостинге. Место размещения особо не играет роли. Можете разместить его там же, где и jquery.js, чтобы все было в одном месте.
Также разместите на хостинге файл изображения кнопки.
После этого начинаем редактирование файла footer.php. Это можно сделать через административную панель, также как в случае с файлом header.php. Заходите в пункт Внешний вид — Редактор, находите Подвал, и перед закрывающим тэгом </body> вставляете код:
<noindex>
<a id="toTop" href="#"><img src="http://Путь к картинке/картинка.png" alt="« align=»absmiddle" border="0" /></a>
<script type="text/javascript" src="http://Путь к файлу/scroll.js"></script>
<script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); });// ]]></script></noindex>
В этом коде прописываете свой путь к картинке, и путь к файлу scroll.js.
И последнее, что нужно сделать — поставить необходимый нам стиль CSS для кнопки, чтобы она все время находилась на одном месте, и чтобы при наведении на нее мышкой изображение курсора изменялось так, как оно меняется при наведении на ссылку.
Реализуется это при помощи стиля CSS:
#toTop {
position : fixed;
bottom : 10px;
right : 0px;
cursor : pointer;
}
На блоге этот стиль прописывается в файле style.css. Его тоже можно найти в административной панели в пункте Внешний вид — Редактор — Список стилей. Находите и устанавливаете этот код.
Если у Вас не блог WordPress, а какой-то другой сайт, на другом движке или простой сайт html, все эти коды Вы прописываете в основном файле, и в файле style.css, если он есть.
Вот и все, кнопка вверх должна у Вас появиться. Еще раз повторю коротко, что нужно сделать:
- Скачать файлы jquery.js и scroll.js.
- Разместить эти файлы, и файл картинки на хостинге.
- Прописать необходимые коды в файлах: header.php, footer.php и style.css.
Желаю Вам успеха в установке кнопки!
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Вам понравилась статья? Поделитесь, буду весьма признателен:
Также приглашаю добавиться в друзья в социальных сетях:

Установила по Вашей инструкции плагин Scroll to top. Плагин установился, но отображается не в виде стрелки а значком Scroll to top. Сам значок работает, но почему не стрелка? Что я не так сделала? Наверное, не та версия.
Спасибо
Классно, мне очень нравится эта идея. Нужно попробовать сделать, если хватит знаний.Удачи!!!
Выберите рубрику
Успех и личностный рост
Компьютерная Азбука
Бизнес в Интернете
Продвижение сайтов
Инвестиции
Бизнес на земле
Интересно
Подписка на pro444.ru
Что у нас
часто ищут
Бесплатные сервисы