Как сделать кнопку «наверх» на сайте или блоге?

Здравствуйте, уважаемые читатели моего блога!

Недавно в моем блоге появилась кнопка наверх. Эта кнопка выполнена без использования каких-либо плагинов, с минимальными действиями по редактировании кода. Кроме того, она плавно появляется и исчезает и плавно прокручивает страницу наверх.

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

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

Кнопка «наверх» без плагина с использованием jquery

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

В нем находятся два файла. Первый – это файл top.js, второй – само изображение стрелки в формате gif (top.gif). Эти файлы нужно распаковать и закачать в папку с блогом.

Файл top.js я закачал в корень блога (то есть в корневую папку, где хранятся все файлы), а файл top.gif в папку images.
В итоге к файлам получились такие адреса:

http://asbseo.ru/top.js

Для того чтобы кнопка плавно исчезала и появлялась, необходимо подключить библиотеку jquery для wordpress.

Как подключить jquery на WordPress блог?

Откройте для редактирования файл functions.php и вставьте в любое место следующий код:

// smart jquery inclusion
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 темы блога и перед закрывающим тэгом «</body>» вставьте следующий код:

<a id="toTop" href="#"><img src="http://my sait.ru/images/top.gif" alt="« align=»absmiddle" border="0" /></a>
<script type="text/javascript" src="http://mysait/top.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); });
// ]]></script>

НЕ ЗАБУДЬТЕ ПОМЕНЯТЬ ПУТИ К СВОИМ ФАЙЛАМ (mysait.ru/….../…)!!!

Теперь зайдите в файл 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;}

Здесь можете немного побаловаться с настройками кнопки наверх.

После сохранения всех изменений кнопка должна появиться на сайте. Только не забудьте обновить страницу.

Файл с изображением стрелки (кнопки) можно заменить любым своим изображением. Картинки можно найти в поисковых системах (поиск по картинкам) и отредактировать в графическом редакторе.

Теперь я немного расскажу о том, как изменить внешний вид кнопки наверх при помощи программы Adobe Photoshop:

— откройте файл top.gif с помощью photoshop, перейдите в режим RBG (изображение-режим-RBG);

— найдите в интернете понравившуюся кнопку;

— созраните ее на компьютер и тоже откройте при помощи фотошопа;

— сотрите все изображение в старой кнопке при помощи инструмента ластик;

— выделите новое изображение стрелки при помощи инструмента «Прямоугольная область»;

— выберите инструмент «Перемещение» и перенесите изображение новой стрелки на место старого;

— подгоните размеры изображения.

Не забудьте при сохранении оптимизировать изображение, подробнее об этом я писал в этой статье.

Вот так можно изменять внешний вид стрелок и кнопок наверх.

Кнопка наверх при помощи плагина «Scroll to Top Plugin»

Теперь я расскажу о том, как сделать кнопку« вверх» при помощи плагина «Scroll to Top Plugin». Этот способ подойдет тем, кто не любит или боится возиться с кодом шаблона.

Чтобы скачать плагин «Scroll to Top» перейдите по этой ссылке.

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

Ничего больше делать не нужно. После обновления страницы на блоге появится вот такая кнопка:

Кстати, внутри папки с плагином находятся всего два файла. Это файл scrolltotop.php и файл с изображением стрелки up.png, последний находится в папке image. Эту стрелку можно так же изменить.

На этом у меня все. Как Вам статья?

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

С уважением, Александр Бобрин

Поделись с друзьями: