Кнопка наверх для сайта — 2 варианта использования
Привет друзья, сегодня мы с вами поговорим об одном приятном дополнении к любому развивающемуся ресурсу под названием – Кнопка наверх для сайта. Название уже, наверное, говорит само за себя, да это кнопка с помощью, которой можно легко осуществлять очень быструю навигацию по сайту и для читателей эта функция может быть весьма полезной. Не нужно прокручивать целую страницу длинного текста, нажал на кнопку и ты в самом верхнем положении на блоге. При использовании кнопки наверх мы рассмотрим два варианта ее реализации:
1) С помощью установки кода в несколько файлов (без использования плагина)
2) С использованием плагина «Scroll to Top Plugin»
Кнопка наверх для сайта с использованием jquery.
Скачиваем вот этот архив, внутри его будет находиться два файла — top.js и top.png.
Копируем файл top.js в корень сайта, чтобы он был доступен по адресу – http://site.ru/top.js и аналогичным образом копируем файл top.png в папку с картинками на вашем блоге или в любую вам удобную. У меня этот файл располагается в папке с картинками моего шаблона.
Пояснение: Файл top.png, это и есть та самая картинка-стрелка с помощью, которой будет осуществляться быстрая навигация по сайту. Вы можете поменять эту картинку на любую понравившуюся вам для использования под себя.
После чего открываем файл functions.php вашей темы и в любое место (я вставлял в самом низу) вставляем код приведенный ниже:
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}
Открываем файл footer.php и вставляем код в самый низ перед тэгом . Не забудьте поменять site.ru на имя вашего сайта и пропишите полный путь до изображения.
<a id="toTop" href="#"><img src="http://site.ru/images/top.png" alt="« align=»absmiddle" border="0" />
<script type="text/javascript" src="http://site/top.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); });
// ]]></script>
И последний момент, который нам нужно проделать, вставка кода в файл 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;}
Во и все, перезагрузите страницу вашего блога и аккуратненькая кнопка наверх для сайта готова к работе.
Кнопка наверх с использованием плагина «Scroll to Top Plugin».
В этом варианте использования кнопки все намного проще, не нужно возится с установкой кода, функции выполняются те же. Скачиваем плагин, устанавливаем его стандартным способом, активируем и все – наша кнопка готова к использованию.
Если вы хотите изменить стандартную кнопку на свою, для этого пропишите в первой строке полный адрес картинки (если стандартная картинка устраивает, оставляем пустое поле), во второй строчке можно отрегулировать значение скорости прокрутки страницы (в миллисекундах). И третья строка отвечает за высоту после которой должна появится кнопка. На само деле, все настройки по умолчанию являются вполне приемлемыми и менять ничего не нужно. Вот только, саму картинку можно изменить подходящую под дизайн вашего блога.
Лично я использую первый вариант без плагина, поскольку плагинов и так установлено достаточно, а дополнительная нагрузка на блог, это не очень хорошо. Но тут решает каждый сам для себя.
Вот и все друзья, ничего сложного как мы видим нет, если возникнут трудности, пишите в комментариях, я помогу разобраться.
и получай самую свежую информацию на свой e-mail!
Свежая информация в сфере SEO:
Мне первый способ больше понравился.
Здравствуйте! Не устанавливается плагин. Пишет: корректных плагинов не найдено.
Плагин не устанавливается.
captain022 и Юрий, разархивируйте архив, там будет папка в ней еще один архив и уже в нем папка с необходимыми файлами — ее и скопируйте.
Спасибо! Установил плагином. Теперь попробую установить кодом.
С использованием плагина «Scroll to Top Plugin» мне вариант больше понравился. Может потому что получилось?! Скачала-раз, активировала- два и готово !!!! Единственное- я еще не поменяла стандартную версию кнопки на свою. Thank’s !
Варвара,это просто удобный и простой вариант установки,но так же дополнительная нагрузка на движек.
Если на сайте есть кнопка «Вверх» я уже заочно уважаю его создателя, потому что приятно, что о моем удобстве как о пользователя и читателя думают заранее. Когда я думала в свой вяло развивающийся блог пристроить такую кнопку, использовала Scroll to Top Plugin, но картинка стандартной стрелки совсем не вписывала в остальное оформление. Поэтому удалила ее.
Согласен полностью.
А еще бы кнопка в низ,к комментариям,а так же пауза,что бы можно было тормознуть прокрутку.
Есть такой скрипт,но его нужно подгонять,под дизайн блога.
На клавиатуре есть кнопка Up, но мышкой Up делать удобней.
Что-то никак не установлю на сайт кнопку наверх, потому что не считала её самой необходимой. Но когда стала попадать на сайты, где под статьями накоплено по сотне комментариев — вижу её необходимость.
Так что пора и самой сделать эту необходимую кнопку.
Да действительно, чем больше комментариев, тем более целесообразно установить эту кнопку для удобства пользователей.
Я тоже пользовался кнопками такими очень удобные.
Ой забыл ваша кнопка очень не плохая, и статья хорошая
Доброго времени суток!
Да действительно, вроде бы небольшая кнопка вверх, а сколько людей скажут вам спасибо за нее. бывает на блогах статьи с картинками занимают не один экран, а вот крутить колесиком мышки не всегда хочется и тут помогает кнопочка вверх для блога — нажали и вас плавненько перевели в начало статьи. Я использовал 1-й метод. 2-й метод удобней. Но на вкус и цвет как говорится…
Я где-то читал, что кнопка вверх (по скрипту) должна появляться не сразу, а только когда вниз уходит страничка.
Но у меня на одном из сайтов сразу выходит. Не знаю что и сделать…
Попробуйте на форумах тематических спросить, ребята помогут.
Я тоже на своем блоге сделал с помощью кода. Как то думаю делать стрелку вверх с помощью плагина не совсем хорошо. Потому что этот процесс отнимает всего пару минут для того чтобы внедрить с помощью когда. Зачем лишние плагины вообще вешать.
Подробно. И вовремя как раз.
Я искала плагины в самой консоли по ключевому слову Scroll и перебирала все подряд оттуда, пытаясь найти такой, чтобы валидность не губил. Почему-то большинство из представленных добавляют сайту от 6 до 20 ошибок. Знаю, что это не принципиально, но когда только начала изучать Вордпресс, наивно думала, что без 100% валидности меня поисковики не увидят. 🙂
При отключённой у пользователя джаве кнопка работать не будет.
На данный момент,я использую плагин Scroll Top and Bottom.Очень удобно кнопка вверх и вниз,можно поменять цвет и дизайн кнопки
Форму кнопки можно менять в Scroll Top and Bottom?
Да можно.Несколько вариантов есть
Если в Scroll Top and Bottom есть авторский вариант, то совсем классно.