Кнопка наверх для сайта — 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».

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

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

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

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