В этой статье мы рассмотрим, как создать кнопку «вернуться наверх» с помощью 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">
$(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;
}
Таким образом, мы подключили кнопку наверх и теперь, когда пользователи отпустятся в низ сайта, кнопка плавно вернет их наверх.
Дизайн и текст вы можете поменять, настроить под цвета своего сайта.
Всем удачи!
