Стильная кнопка Вверх с плавной прокруткой

0
20
Стильная кнопка Вверх с плавной прокруткой
Стильная кнопка Вверх с плавной прокруткой

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

Если вы уже используете у себя на сайте похожее приложение (другой скрипт или плагин), то их необходимо будет удалить, во избежании возможных конфликтов. Устанавливается скрипт довольно просто, поэтому каких-либо затруднений возникнуть не должно.

В папке находятся два файла: сам скрипт — scroll.js и картинка — verx.png. Скрипт закачиваем в папку «js» вашей темы, а картинку в папку «images». Кстати, картинку вы можете заменить на свою. Большой выбор различных иконок выложены здесь.

Идем дальше. Подключаем наш скрипт к сайту. Открываем файл 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>
Обязательно проверьте путь к картинке. Сохраните файл и обновите страницу (также рекомендуется очистить кэш). Прокрутите страницу и в условном месте должна появиться кнопка вверх. Нажмите на нее для проверки. Если же у вас на сайте появилась только картинка кнопки и при нажатии страница не прокручивается, значит у вас не подключена библиотека JQuery. А без нее данный скрипт попросту не работает.

Подключается она довольно просто. Достаточно в файл functions.php в самом его начале после открывающего тега <?php вставить следующий код:

if( !is_admin()){
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, («http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»), false, ‘1.7.2’);
wp_enqueue_script(‘jquery’);
}
Таким образом мы отключили имеющуюся уже в движке WordPress библиотеку JQuery и подключили ее напрямую к серверу Google, что положительно влияет на экономию вашего трафика и скорость загрузки страниц.

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

#toTop {
position : fixed;
bottom : 40px;
right : 10px;
cursor : pointer;
}
Настройте параметры под свой сайт.

Вот и все, друзья мои, пользуйтесь на здоровье! Если же у вас возникнут какие-либо проблемы с установкой скрипта, пишите в комментариях или же посредством формы обратной связи. Всегда буду рад оказать помощь.

В следующих статьях мы с вами начнем рассматривать новую рубрику, посвятить которую я решил различным эффектам, реализуемыми с помощью JQuery. Мы научимся делать анимированные тексты, меню, всплывающие подсказки, слайдеры и многое другое из мира java скриптов. Поэтому подписывайтесь на обновления и вы всегда будете в курсе всех событий!

А сегодняшний пост, как установить скрипт кнопки вверх с прокруткой, подошел к концу.

Комментарии:

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here