Прокрутку — долой! Да здравствует кнопка «Наверх»!

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

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

Данную кнопку можно установить на любой сайт как на Joomla так и на WordPress. Главное последовательно выполнить три шага:

1. Скачиваете вот этот архив, в котором расположено два файла. Первый – это изображение кнопки (verx.gif), а второй – скрипт (verx.js). Распаковываете скаченный архив и размещаете файлы у себя на сервере, то есть verx.js перекидываете с помощью ftp – клиента в корневую директорию сайта или блога (у меня это папка public_html). Файл verx.gif помещаете в папку с изображениями (у меня это /wp-content/uploads/2011/11/).

Сделали? Тогда переходим ко второму шагу.

2.Копируем код:

 
<a id="toTop" href="#"></a><script src="http://site.ru/verx.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); });
// ]]></script>

где Вы вместо site.ru прописываете адрес Ваше сайта или блога

/путь к картинке/- прописываете точный путь к картинке

и вставляете измененный код для wordpress это будет файл footer.php используемой темы перед закрывающимся тегом </body>,

то что на скриншоте выделено зеленом цветом замените своими данными

а для joomla это будет файл index.php также в примененной теме. При этом не забывайте сохранять произведенные изменения.

3. В завершающем третьем шаге необходимо открыть файл style.css Вашего шаблона  и в самом конце прописать следующий стиль:

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

Снова сохраняем изменения, обновляем страницу нашего ресурса и начинаем спускаться вниз – появляется кнопка “Наверх” в правом нижнем углу.

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

Вам понравилась статья? Расскажите о ней друзьям!