Кнопка Наверх на JQuery

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

Кнопка Наверх Bootstrap 3

Кнопка «Наверх» будет очень полезна «высоким» сайтам, например как этот блог. Где находятся статьи, а особенно ответы на тесты, которые из-за своего построения, вытягивают страницу.

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

Со всеми этими эффектами, нам поможет справиться JQuery. 

 

jQuery

 

Подключаем кнопку наверх к нашему сайту

 

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

Начнем с подключения JQuery, иначе если мы этого не сделаем, кнопка у нас работать не будет.

Копируем и вставляем между тегами <head> <⁄head> тегами и следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

На Joomla 3 например, JQuery входит в состав пакета и подключается автоматически.

Посмотреть и скачать последнюю версию JQuery можно с официального сайта - http://jquery.com/

Так мы подключили JQuery, теперь нужно разместить скрипт работы кнопки перед тегом </head> или так же можно вынести его в отдельный файл и подключить:

<script type="text/javascript"> jQuery(document).ready(function() { jQuery("#back-top").hide(); jQuery(function () { jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 1000) { jQuery('#back-top').fadeIn(); } else { jQuery('#back-top').fadeOut(); } }); jQuery('#back-top a').click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 750); return false; }); }); }); </script>

Данный код работает на Joomla 3, но в безопасном режиме JQuery - noConflict.

Если код у вас JQuery работает в обычно режиме, то в коде заменить "JQuery" на значок доллара "$":

<script type="text/javascript"> jQuery(document).ready(function($) { $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 1000) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 750); return false; }); }); }); </script>

Не закрывая наш файл шаблона, сразу размещаем html код самой кнопки, лучше это сделать в самом конце, перед тегом </body>:

<p id="back-top"> <a href="#top"> <span class="glyphicon glyphicon-arrow-up">Наверх</span> </a> </p>

И чтобы придать стиль кнопке, копируем стили в свой css файл сайта:

#back-top { position: fixed; bottom: 300px; right: 20%; z-index:999; } #back-top a{ display: block; text-align: left; font: 16px/100% Verdana !important; text-decoration: none; color: #fff; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; padding: 10px 15px 10px 10px; border-radius: 10px; background: green; } #back-top a:hover { background: #aaa; color: #000; }

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

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

 

Всем удачи!

 

Добавить комментарий

Защитный код
Обновить

Я рекомендую


Челябинская область

Мебель на заказ от производителя

В этот блок попасть не так просто. Я проверяю социальные сети, сайт и отзывы о компании.

Если у вас имеются вопросы по поводу работы сайта, сотрудничества и предложений, Вы можете написать на почту info@alexfine.ru

Я создал первую версию блога и введу его с 2015 года.

Копирование материалов сайта возможно только с указанием активной ссылки "www.alexfine.ru" в качестве источника.

Изображение кнопки наверх

Вконтакте
Вконтакте
Вконтакте
Вконтакте
Вконтакте
+