Плагин прокрутки страницы вверх wordpress. Кнопка вверх WordPress — лучшие плагины. Полупрозрачная кнопка при помощи JQuery и CSS

Все, что требуется от вебмастера – это чтобы его сайт был удобным, чтобы пользование им не вызывало депрессию у посетителей, и шаблон не мешал юзерам спокойно изучать материалы ресурса. Если вы будете использовать не измененную тему Вордпресс, скорее всего, у вас не получится сделать удобный сайт, так как по умолчанию кнопки для WordPress не устанавливаются – их нужно дополнительно скачивать и активировать. Ведь чтобы пользователь мог удобно читать статьи и листать содержимое, на сайте обязательно должна быть кнопка “Вверх”.

Кнопка “Наверх” – это небольшой значок-стрелочка, при нажатии на который страница быстро прокручивается вверх.

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

jQuery Smooth Scroll – это удобный и быстрый модуль для активации кнопки “Вверх” на сайте. Чтобы добавить на ресурсе такую кнопку, достаточно скачать и установить плагин. Сразу после активации сбоку страниц появляется небольшая плавающая кнопка. С ней читать длинные статьи и листать страницу будет куда проще. Кнопка имеет стильный дизайн, и не потеряется на фоне шаблона Вордпресс.

А если вы знаете особенности CSS языка программирования, то сможете самостоятельно настроить кнопку “Вверх” по собственному усмотрению. В целом, плагина jQuery Smooth Scroll достаточно, чтобы удовлетворить потребности большинства вебмастеров, но далее будут рассмотрены еще несколько популярных инструментов на случай, если этот модуль у вас не сработает.

Smooth Scroll Up

Далее следует не менее популярный плагин Smooth Scroll Up – это предельно простой и понятный инструмент, что в считанные минуты позволит создать иконку “Наверх” в боковой части сайта. Хотя в модуле и нет множества настроек, он весьма функционален. Далее указаны основные особенности плагина Smooth Scroll Up:

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

WPFront Scroll Top

Этот плагин отлично подойдет для тех, кто не желает самостоятельно думать над тем, какой будет кнопка. Если вы просто хотите, что пользователям было проще читать и просматривать материалы, и при этом иметь интересную кнопку прокрутки, то WPFront Scroll Top – как раз то, что вам нужно. Модуль содержит крупную коллекцию готовых иконок. А если не хотите разбавлять внимание пользователя иконкой “Далее”, то можете просто добавить текст для прокрутки без изображения.

Плагин WPFront Scroll Top легко устанавливается на движок Вордпресс. Он содержит массу настроек, таких как:

активация/дезактивация кнопки;
размер иконки;
степень прозрачности;
скорость прокрутки;
добавление автоматического скрытия кнопки через заданное количество секунд;
пропись тега Alt для элемента;
цвет и фоновое оформление текста кнопки (главное – чтобы читать надпись было удобно, она должна быть выразительной).

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

Scroll Back To Top

Далее еще один плагин, который улучшит “юзабилити” вашего ресурса – инструмент Scroll Back To Top. Он также содержит множество параметров настройки. Вы сможете в любой момент деактивировать элемент, сделать его непрозрачным или создать превью иконки. Размер и цвет элемента легко регулируются. Можно настраивать расстояние от “топа” сайта, после прохождения которого появляется кнопка. Расположение элемента в левой, правой части и по средине страницы.

Плагин Scroll Back To Top не содержит большого количество типов икон. Всего их около 10. По надобности можно отключить иконку и оставить один только текст (“Далее”, “Вверх” и т. п.). Размер иконок регулируется по специальной шкале от одного до шести. Для активации индивидуального стиля в параметрах элемента есть пункт “Extra CSS” для добавления собственного дизайна.

Dynamic “To Top” Plugin

Это английский модуль для размещения кнопки “Наверх” практически в любом положении на сайте. С ним читать и листать страницу будет куда проще, ведь кнопка может быть размещена в одном из четырех положений. Плагин настраивается на английском языке. Кнопка может быть активирована/отключена для мобильной версии ресурса. Скорость прокрутки регулируется.

Что интересно, плагин Dynamic “To Top” Plugin работает с кэшированием, потому постоянные пользователи смогут читать ваши посты и прокручивать страницы без промедлений работы браузера. Модуль прекрасно отображается на компьютерах и нового, и старого поколения.

Skysa Scroll-to-Top App

Далее следует Skysa Scroll-to-Top App – плагин, который абсолютно не похож на своих конкурентов. Вы не просто добавите при помощи него кнопку “Наверх”, но и сможете воспользоваться этим инструментом для создания целого бара виджетов. К примеру, можно добавить плавающий блок с голосованиями, кнопками социальных сетей и элементом прокрутки страницы. А чтобы плагин не тормозил работу сайта, он работает с кэшем браузеров. Возможности данного модуля практически не ограничены – вы даже сможете добавить ссылки в бар с кнопкой прокрутки.

Вывод

Скачать одно из указанных дополнений – это ничего не стоит для вас. Зато для сайта это принесет огромную пользу. Кнопки “Далее”, “Наверх”, “Назад” и т. д. значительно облегчат жизнь посетителям ресурса. Поверьте, они будут благодарны! А вместе с ними – и поисковые машины, так как чем сайт удобней, тем выше его позиции в поиске.

Здравствуйте, уважаемые читатели.В этой статье я расскажу вам, как установить кнопку “вверх ” для блога WordPress. Сделать эту кнопочку можно двумя способами. Первый способ заключается в установке специального плагина. А второй, в изменении php кода в файлах вашей активной темы.

По большому счету, можно с легкостью обойтись и без этой кнопки. Эта кнопка уже у вас есть на клавиатуре, называется она “home ” . Нажав которую, вы быстро переместитесь на начало страницы.

Многие веб-мастера устанавливают на свой сайт эту кнопку. Кто-то ставит ее для более удобной навигации пользователей по сайту, а для кого-то, это неотъемлемая часть дизайна.

1.Установка кнопки при помощи плагина.

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

Есть много плагинов которые позволяют добавить кнопку наверх, но я решил в качестве примера выбрать плагин Scroll Back To Top. Скачайте его , загрузите и активируйте.

Плагин имеет целый ряд настроек. Но всё трогать не обязательно. Достаточно настроить расположение и вид кнопки.

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

Кнопка вверх для сайта - более 7 проверенных решений - 4.6 out of 5 based on 73 votes

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

Для чего нужна данная кнопка и в каких случаях ее лучше всего использовать

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

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

1. Простая кнопка "Наверх" без JavaScript

Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.

Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:

^Наверх

Пример CSS кода:

Topbutton { width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding:10px; position:fixed; bottom:50px; right:50px; cursor:pointer; color:#333; font-family:verdana; font-size:12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }

Недостатки:

Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.

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

Плюсы данного вида кнопки:

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

2. Кнопка наверх с помощью jQuery

Кнопка реализована достаточно просто. Для ее функционирования понадобится библиотека jQuery, небольшой скрипт содержащий события jQuery, определенные стили и тег DIV содержащий сам текст и необходимый ID.

Кнопка работает в браузерах начиная с версий Firefox 3.0.10 - 3.6.13, Internet Explorer 7 и 8, Google Chrome, Jquery 1.4.3. К сожалению кнопка не работает в IE 6, а оно вам надо:) ?

JQuery JavaScript код:

Представленный ниже код вам необходимо вставить переде тегом на всех страницах вашего сайта. Если библиотека jQuery уже подключена к вашему сайту, то первую строчку добавлять не нужно.

$(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $("#toTop").fadeIn(); } else { $("#toTop").fadeOut(); } }); $("#toTop").click(function() { $("body,html").animate({scrollTop:0},800); }); });

Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.

#toTop { width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* отступ кнопки от нижнего края страницы*/ right:10px; cursor:pointer; display:none; color:#333; font-family:verdana; font-size:11px; }

Для вызова кнопки добавьте следующий HTML код перед тегом .

^ Наверх

3. UItoTop JQuery плагин

Простой плагин делающий плавное появление кнопки и плавный скроллинг вверх при нажатии на ее. Чтобы задействовать плагин на своем сайте нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить все необходимые файлы плагина и он будет работать.

Исходники

В представленном архиве находится 3 папки: css - файл стилей кнопки, img - изображение и папка js в которой находятся 4 JavaScript файла.

Подключение JavaScript файлов:

Распакуйте скачанный архив с исходниками в какую либо папку вашего сайта. Для задействования плагина нам достаточно подключить три из имеющихся js файлов. Для их подключения перед закрывающим тегом добавьте следующие пути к файлам:

$(document).ready(function() { /* var defaults = { containerID: "toTop", // fading element id containerHoverID: "toTopHover", // fading element hover id scrollSpeed: 1200, easingType: "linear" }; */ $().UItoTop({ easingType: "easeOutQuart" }); });

Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.

Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:

Добавление CSS:

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

Первый способ это добавить на все страницы вашего сайта между тегами ссылку на CSS файл стилей:

Не забудьте только изменить путь к файлу.

Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.

4. Кнопки прокрутки вверх и вниз на JQUERY

Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают. Этот эффект вы можете увидеть просмотрев демо.

Исходники

В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.

Подключить HTML:

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

Подключение JavaScript:

Сразу после HTML кода, перед тегом разместите код вызова необходимых JavaScript файлов и JQuery код.

$(function() { var $elem = $("#content"); $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn("slow"); $(window).bind("scrollstart", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"0.2"}); }); $(window).bind("scrollstop", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"1"}); }); $("#nav_down").click(function (e) { $("html, body").animate({scrollTop: $elem.height()}, 800); }); $("#nav_up").click(function (e) { $("html, body").animate({scrollTop: "0px"}, 800); }); });

Пути ведущие к JS файлам необходимо заменить на свои.

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

Далее следует подключение еще одного JS файла и код содержащий определенные функции, которые необходимо рассмотреть подробнее. Потому как про помощи их можно изменять некоторые параметры работы кнопок. Ниже приведен код с разъяснениями:

// content - это идентификатор того дива внутри которого должно лежать все содержимое, которое должно прокручиваться, если все содержимое страниц вашего сайта лежит в другом id, то можете его сюда вписать, т. к. без этого кнопки работать не будут $(function() { var $elem = $("#content"); // при помощи следующих двух строчек производится показ кнопок $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn("slow"); // при прокрутке у кнопок появляется эффект затухания, реализовано это изменением их прозрачности, поэтому меняя показатель 0,2 в диапазоне от 0,1 до 1 можно регулировать их прозрачность $(window).bind("scrollstart", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"0.2"}); }); // здесь можно регулировать ту же прозрачность, но уже в тот момент когда кнопки просто отображаются на странице, по умолчанию значение - 1 $(window).bind("scrollstop", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"1"}); }); // изменяя число 800 можно увеличивать или уменьшать скорость прокрутки страницы вверх $("#nav_down").click(function (e) { $("html, body").animate({scrollTop: $elem.height()}, 800); }); // то же, что и выше но для прокрутки вниз $("#nav_up").click(function (e) { $("html, body").animate({scrollTop: "0px"}, 800); }); });

Подключение CSS:

Для того, чтобы добавить CSS просто подключите к страницам сайта файл style.css, находящийся в архиве с исходниками:

А самым лучшим вариантом будет скопировать стили этого файла и вставить их в файл стилей своего сайта.

5. Кнопка плавной прокрутки вверх при помощи JQuery

Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.

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

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:

Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:

Наверх

Scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url("icon_top.png") no-repeat; }

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами ...? вставляем следующее:

Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:

$(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".scrollup").fadeIn(); } else { $(".scrollup").fadeOut(); } }); $(".scrollup").click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); });

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

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

Источник: http://gazpo.com/2012/02/scrolltop/

6. Анимированная кнопка перехода вверх

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

Для создания кнопки используется изображение стрелки, CSS стили и JQuery.

Изображение:

HTML код:

Для вызова кнопки используется следующий HTML код:

Но помещать его нужно непосредственно перед основным содержимым страницы, если поместить его перед закрывающим тегом , то кнопка не будет работать.

И еще один важный момент, касающийся HTML кода. Тегу вы должны присвоить идентификатор top.

В случае если тегу уже присвоен определенный id, тогда в коде вызова кнопки, размещенном чуть выше, #top нужно заменить на #ваш-id

При помощи CSS заданы отступы и внешний вид кнопки, добавлено свойство transition: для создания эффекта задержки при наведении курсора. Вставлять его лучше в CSS файл вашего сайта.

#back-top { position: fixed; bottom: 30px; margin-left: -150px; } #back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon (span tag) */ #back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #777; }

$(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); // scroll body to 0px on click $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }); });

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

При необходимости можете изменить следующие параметры:

100 - это количество пикселей, после прокрутки которого появляется кнопка;
0 - это значит что прокрутка будет производится до нулевого пикселя т. е. до самого верха.
800 - это скорость прокрутки в миллисекундах.

7. Полупрозрачная кнопка при помощи JQuery и CSS

Большая полупрозрачная кнопка вверх появляющаяся при скроллинге по центру страницы. Не заметить ее трудно. Сделана только при помощи JQuery и CSS.

Разбираемся с HTML:

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

Здесь ничего особенного нет, просто вставьте данный код в файл CSS стилей вашего сайта.

#message a { /* display: block before hiding */ display: block; display: none; /* link is above all other elements */ z-index: 999; /* link doesn"t hide text behind it */ opacity: .8; /* link stays at same place on page */ position: fixed; /* link goes at the bottom of the page */ top: 100%; margin-top: -80px; /* = height + preferred bottom margin */ /* link is centered */ left: 50%; margin-left: -160px; /* = half of width */ /* round the corners (to your preference) */ -moz-border-radius: 24px; -webkit-border-radius: 24px; /* make it big and easy to see (size, style to preferences) */ width: 300px; line-height: 48px; height: 48px; padding: 10px; background-color: #000; font-size: 24px; text-align: center; color: #fff;

$(function () { /* set variables locally for increased performance */ var scroll_timer; var displayed = false; var $message = $("#message a"); var $window = $(window); var top = $(document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { if($window.scrollTop() 0 || y > 0) { var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time); } return false; } //* function scrollTop(){ var el = $("gotop"); var stop = (document.body.scrollTop || document.documentElement.scrollTop); if(stop>400){ if(el.style.display!="block"){ el.style.display="block"; smoothopaque(el, 0, 100, 1); } } else el.style.display="none"; return false; } // Плавная смена прозрачности function smoothopaque(el, startop, endop, inc){ op = startop; // Устанавливаем прозрачность setopacity(el, op); // Начинаем изменение прозрачности setTimeout(slowopacity, 1); function slowopacity(){ if(startop endop){ setTimeout(slowopacity, 1); } } setopacity(el, op); }; }; // установка opacity function setopacity(el, opacity){ el.style.opacity = (opacity/100); el.style.filter = "alpha(opacity=" + opacity + ")"; }; if (window.addEventListener){ window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); } else if (window.attachEvent){ window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); } window["top"] = {}; window["top"]["goTop"] = goTop; })();

Скорее всего, в корневой папке вашего блога или web-сайта на хостинге (чаще всего это public_html) имеется директория js с файлами JavaScript. Там и создаете файл totop.js с помощью уже упомянутой мной программы notepad++, вставив в него этот код. Таким образом, полный путь до свежеиспеченного файла у меня получился таким:

/themes/cloudy/js/totop.js">

Теперь нужно создать изображение для “кнопки вверх”. Для этого можно использовать любой графический редактор, включая просмотрщик фотографий FastStone Image Viewer ( об этой интересной программе детальный мануал). Также можно использовать для этих целей, например, Fotoshop, в том числе версию онлайн приложений, коих в интернете немало.

Понимаю, что у некоторых неискушенных читателей могут возникнуть некоторые сложности при желании заполучить красивую кнопку наверх, которая к тому же еще бы и вписалась в дизайн. Поэтому в одной из ближайших публикаций уделю на это время и подробно объясню, как я создал подобную иконку в виде стрелки вверх для своего блога в онлайн Фотошопе . Пока же представляю готовый результат в виде спрайта, включающего два рисунка:

Объясню вкратце, что объединение фоновых картинок сайта в спрайты (по англ. sprite - фея, призрак) дает возможность сократить число http запросов, тем самым внести определенную лепту в благородное дело уменьшения нагрузки на сервер. В данном случае создание спрайта из двух стрелок обеспечивает изменение вида изображения при подведении к нему курсора мышки, то есть возникает анимационный эффект.

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

Итак, будем считать, что рисунок стрелки «наверх» готов (кстати, стрелку можно заменить на другую картинку, например, в виде красивой кнопки). Далее загружаем изображение на сервер опять же в корень сайта (обычно там уже имеется папка IMAGES). Для этих целей советую использовать программу FileZilla ( пост об этом ФТП клиенте), который очень удобен при перемещении и работе с изображениями, или другой подобный софт. У меня абсолютный путь до изображения с двумя стрелками получился следующим:

/images/totop.png

Однако, для url картинки, которая выводится с помощью средств CSS, можно использовать и относительный путь:

/images/totop.png

Применяйте как абсолютный, так и относительный адрес, разницы нет. Имейте ввиду, что у вас полный URL может быть другим. Внимательно исследуйте вложенность папок, которые и определяют содержание пути. Следующим шагом открываем файл footer.php и вставляем в него в самый конец перед закрывающим тегом body такую конструкцию:

Не забудьте вместо «путь_до_файла» вставить последовательность всех папок, определяющих URL именно для вашего проекта. И последний шаг. Нужно определить стили CSS, которые следует внести в файл style.css темы Вордпресс. Предлагаю свой вариант:

#gotop { position: fixed; bottom: 60px; width: 56px; height: 96px; margin-left: 1170px; background: url(путь_до_файла/totop.png) no-repeat 0 0; }

И здесь при описании свойства background не забудьте в качестве значения url указать путь до файла totop.png (абсолютный или относительный). Имейте ввиду, что абсолютный путь должен начинаться с «http://». Для того, чтобы обеспечить смену вида кнопки при подведении к ней курсора, пропишем еще одно условие в тот же файл style.css:

#gotop:hover { background: url(/путь_до_файла/totop.png) no-repeat -56px 0; }

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