RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Фев
14

Делаем стрелку вверх на JQuery и CSS

Добрый день, уважаемые читатели блога «Золотой серфер». Сегодня мы с вами займемся установкой кнопки, которая поднимает страницу вверх. Как правило, такие стрелки вверх создаются при помощи скриптов JQuery, а для оформления и места расположения стрелки используется CSS. По-моему самое удобное место кнопки в правом нижнем углу, там мы ее сейчас и будем делать.

Вид кнопки стрелки вверх на сайте.

На функции скрипта стрелки вверх,  изображение стрелки, никак не влияет. Поэтому, можете скачивать и использовать ту стрелку вверх, которая вам нравиться. Для примера вот несколько изображений стрелок:

стрелки вверх для сайта

Подключаем JQuery

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

Откройте Ваш сайт — Админ панель — Внешний вид — Редактор, и найдите в правой колонке файл под названием Header.php  (шапку сайта), и вставьте следующий код между тегами <head>…. ….</head>

<script type="text/javascript"
src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

После этого подключаем наш скрипт к сайту. Открываем файл Footer.php и в самом его конце перед закрывающим тегом </body> вставьте следующий код:

<div id="toTop">
<img src="http://ВАШ_САЙТ/wp-content/themes/ТЕМА/images/verx.png" alt="вверх" />
</div>
<script src="<?php bloginfo('template_url'); ?>/js/scroll.js" type="text/javascript"></script>

<script type="text/javascript"> $(function() { $("#toTop").scrollToTop(); }); </script>

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

скачать

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

Различные варианты изображения стрелки вверх в psd:

кнопки

download

Файл стилей CSS

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

/*--Кнопка вверх--*/
#toTop { position : fixed; bottom : 40px; right : 10px; cursor : pointer; }

Этот код можно разместить в конце файла style.css.

Вот в принципе и всё. Так же обязательно посмотрите пример того, что  получилось у меня.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (2) на “Делаем стрелку вверх на JQuery и CSS”

  • алекс (8 коммент.) 1 Август 2014 в 17:19

    почему-то стрелка все время слева — как ни меняю свойства выравнивания данного div

    • CMSONY
      CMSONY (172 коммент.) 1 Август 2014 в 18:05

      Попробуйте использовать отдельный блок display: block;

Оставить комментарий


вверх