Простая кнопка Наверх с функцией возврата – JavaScript
Karina | 09.10.2014
Кнопка «Наверх» очень часто используется на сайтах, где есть много длинных страниц. Когда пользователь, просматривая большую статью, галерею картинок, новости в социальных сетях и т. п., хочет вернуться к началу страницы, он либо долго скроллит (что не очень удобно), либо нажимает клавишу Home на клавиатуре, либо пользуется специальной кнопкой «Наверх».
Преимущество этой кнопки заключается в том, что она может работать на планшетах и смартфонах, и в любых других случаях, когда у вас нет под рукой клавиатуры. К тому же, не все пользователи могут знать о полезной функции клавиши Home, а кнопка на сайте всегда видна, по ней сразу видно, для чего она предназначена. Второй плюс – эту кнопку можно усовершенствовать и сделать так, чтобы она возвращала пользователя к тому месту страницы, откуда он поднялся наверх. Именно этот вариант кнопки мы будем сегодня делать. Вы можете просмотреть демо, а также скачать файл с примером на свой компьютер.
Шаг 1. CSS
Та часть CSS, которая касается стиля кнопки, выглядит следующим образом:
.inTop {
position: fixed;
left: 0px;
top: 0px;
width: 20%;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
display: none;
}
.inTop:hover {
background-color: #f5f4f4;
opacity: 1;
filter: alpha(opacity=100);
}
.inTop span {
display: block;
width: 100%;
margin-top: 20px;
text-align: center;
font-size: 110%;
color: #52466a;
font-family: Georgia, Times, serif;
font-weight: bold;
}
Шаг 2. JavaScript
Следующий шаг – код JavaScript. Для удобства внутри добавлены комментарии с пояснениями:
// объявление переменных:
var BottomPosition = 0; // положение страницы
var BottomFlag = false; // флаг для отображения кнопки GO TO BOTTOM
var AnimateFlag = false;// Флаг для выполнения анимации
$(document).ready(function() {
$('.inTop').click(function() { // клик по кнопке GO TO TOP/GO TO BOTTOM
AnimateFlag = true; // выполняется анимация
if(BottomFlag) { // если нажата кнопка GO TO BOTTOM...
$("body,html").animate({"scrollTop":BottomPosition}, 200, function() { // ...происходит возврат в нужное место страницы со скоростью 200
AnimateFlag = false; // закончилось выполнение анимации
});
BottomFlag = false; // заменяем кнопку
$('.inTop span').html('GO TO TOP');
}
else { // если нажата кнопка GO TO TOP...
$("body,html").animate({"scrollTop":0}, 200, function() { // ...происходит возврат в начало страницы со скоростью 200
AnimateFlag = false;
});
BottomPosition = $(window).scrollTop(); // запоминаем, до какой позиции была прокручена страница
BottomFlag = true; // показываем кнопку GO TO BOTTOM
$('.inTop span').html('GO TO BOTTOM');
}
});
// осуществляем проверку при прокручивании страницы:
$(window).scroll(function(event) {
var countScroll = $(window).scrollTop();
if (countScroll > 200 && !AnimateFlag) { // если пользователь промотал более 200 пикселей...
$('.inTop').show(); // ...показываем кнопку GO TO TOP
if(BottomFlag) {
BottomFlag = false;
$('.inTop span').html('GO TO TOP');
}
}
else {
if(!BottomFlag) {
$('.inTop').hide(); // в других случаях прячем кнопку, если только это не кнопка GO TO BOTTOM
}
}
});
});
Шаг 3. HTML
Осталось дело за малым – создать кнопку в HTML:
<div class="inTop"><span>GO TO TOP</span></div>
Вот и всё, простая, но очень удобная кнопка Наверх для сайта с функцией возврата готова. Вы можете настроить ее стиль самостоятельно, который будет подходить под ваш сайт.
Желаем вам творческих успехов и довольных пользователей!
Оставить комментарий