Ваш IP-адрес: 107.23.176.162

Tel/Viber/WhatsApp: +7-963-074-53-96

E-mail: info@alexfine.ru

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

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

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

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

 

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

 

jQuery

 

 

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

 

 

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

 

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

 

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

 

<script GARBAGE>

  

На 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;
}

 

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

 

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

 

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

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

ob avtore

Всем привет! Меня зовут Александр. Я родился в 1993 году и проживаю на данный момент в городе Челябинске, в самом суровом городе России. Челябинские жители настолько суровые, что на будильник заводят метеорит (падение метеорита в 2013 году) и заказывают землетрясение (в 2018 году). В последние несколько лет, все больше и больше хочется переехать, куда-нибудь в южные города России. Уже более трех лет занимаюсь созданием и продвижением сайтов. Введу свой блог, делюсь своим опытом и помогаю людям.

Копирование материалов сайта возможно только с указанием активной ссылки www.alexfine.ru в качестве источника.
Copyright © 2015-2018 All Rights Reserved. www.alexfine.ru

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