Как поднять страницу вверх. Создаем кнопку «Наверх» или Scroll to Top на jQuery
| 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:
GO TO TOP
Вот и всё, простая, но очень удобная кнопка Наверх для сайта с функцией возврата готова. Вы можете настроить ее стиль самостоятельно, который будет подходить под ваш сайт.
Желаем вам творческих успехов и довольных пользователей!
Был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга - кнопка возврата в начало страницы .
Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами CSS:
position:fixed; /*Расположение кнопки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;
Для особо ленивых товарищей удобно вместо картинки кнопки использовать символы Юникода, оформив их с помощью правил CSS. О том, как выбрать подходящий символ-значок, рассказано в статье "Символы Юникода - полезные значки для сайта ". Например, используя значок с кодом ⇑
, можно получить следующую кнопку:
Оформление кнопки сделано с помощью следующих правил CSS:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;
Описанный способ имеет один недостаток: кнопка возврата наверх выводится постоянно. Чтобы она появлялась только при движении вниз по странице, можно использовать немного измененный скрипт - плагин jQuery liScrollToTop .
Работу этого плагина демонстрирует стрелка справа внизу этой страницы. Кроме появления кнопки только при скроллинге, в плагине добавлена анимация - плавное появление и исчезновение кнопки.
Установка плагина liScrollToTopКак обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop . Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css .
Далее, в заголовок страницы внутри тега ...
вставляем следующие строчки, где указан путь к новым файлам и небольшой javascript
для инициализации плагина:
$(function(){
$(".scrollUp").liScrollToTop();
});
Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV: