Кнопка наверх в виде картинки: как сделать самому

Вступление

Для начала отмечу, что есть плагины которые создают на сайте WordPress, кнопку «Наверх». Но в этой статье мы обойдемся без них. Также, стоит заметить, что некоторые шаблоны, сверстаны уже с установленной кнопкой «Наверх» или надписью «Наверх», «Top». Понятно, что две кнопки «наверх» ставить незачем, хотя и возможно.

Чтобы кнопка наверх в виде картинки появилась на сайте без плагина, нужно поместить специальный код в одном из файлов вашего шаблона WordPress. А теперь подробно.

Кнопка наверх в виде картинки, без плагина

Для установки кнопки «Наверх» нужно сделать четыре несложных шага.

Поместить нужную картинку для кнопки, скорее всего стрелка, в каталог сайта;
Создать скрипт для работы кнопки;
Вставить нужный код в файл footer.php вашего шаблона;
Задать стиль CSS, своей созданной, кнопки.

Разберем каждый шаг подробно.

Поместить нужную картинку для кнопки на сайт

Подберите на просторах Интернет картинку, которая подойдет для кнопки «Наверх». (ТУТ и ТУТ два сайта с большим количеством бесплатных иконок png);
Загрузите картинку к себе на сайт и сразу скопируйте URL размещенной картинки.

Создать скрипт для работы кнопки

Работает кнопка наверх в виде картинки при помощи скрипта. Скрипт скрывает кнопку, если посетитель находится вверху окна, и плавно показывает картинку при начале прокрутки страницы вниз и опять скрывает кнопку при возвращении наверх.

Для создания скрипта «мудрить» ничего не нужно. Просто в любом текстовом редакторе создайте следующий файл. Это сжатый скрипт:

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="300"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="350"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});
$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() { $("#go_up").scrollToTop(); });

Далее. Сохраните его под именем, например, (toTop.js);
Загрузите этот файл (toTop.js) в каталог сайта, например, в каталог [wp-include] в папку [js] ;
Запомните полный путь до размещенного файла js. Например: /ваш_сайт.ru/wp-includes/js/toTop/js.
Каталог размещения скрипта может быть любым. Важно правильно указывать path до файла скрипта.

Как работает скрипт можно прочитать в статье ТУТ.

Вставить код кнопки «Наверх» в файл footer.php вашего шаблона

Важно! Соблюдайте безопасность при редактировании шаблона.

В коде, ниже, замените адрес картинки и адрес скрипта на ваши адреса, зафиксированные в пунктах 1 и 2.

<a href="#" id="toTop">
<img src="<span style="color: #ff6600;">Адрес/вашей/картинки с http</span>" title="Наверх" 
border="0" align="absmiddle" />
</a>
<script src="<span style="color: #ff6600;">http://скрипта</span><span style="color: #ff6600;">
Ваш сайт/wp-includes/js/toTop.js</span>" type="text/javascript"></script>
 <script type="text/javascript">
 $(function() {$("#toTop").scrollToTop(); });
 </script>

Войдите в редактор вашего сайта;
Откройте файл footer.php для редактирования;
Вставьте код с вашими данными между тегами <body></body>, лучше сразу перед закрывающим тегом </body>, в файл footer.php;
Не забываем сохраниться.

Задать стиль CSS своей созданной кнопки

Предлагаю следующий стиль для кнопки «Наверх» :

#toTop {
      width: 60px;
      background: none;
      border: none;
      text-align: center;
      padding: 5px;
      position: fixed;
      bottom: 10px;
      right: 10px;
      cursor: pointer;
      color: #ffffff;
      text-decoration: none;}

Этот код нужно вставить в файл style.css в редакторе. (Внешний вид → Редактор). Вставьте в раздел –Footer– файла style.css или в конец этого файла.
При помощи кода CSS можно переместить кнопку «Наверх» в любое место на странице сайта. Меняйте значения атрибутов, вставляйте новые атрибуты и перемещайте кнопку по странице сайта.

Примечание: Если не размещать скрипт (toTop.js) в каталоге сайта, то кнопка все равно появится. Только она будет постоянно видна ,и при нажатии на нее будет перескакивать наверх, а не скользить.

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

На этом все, Кнопка наверх в виде картинки установлена.

Кнопка наверх в виде картинки