Простая кнопка вверх. Создаем кнопку «Наверх» или Scroll to Top на jQuery. Установка плагина liScrollToTop

В этом уроке, мы узнаем, как создать свою Scroll to Top кнопку для длинных страниц. Способ реализации очень прост. Если вы его усвоите, вы сможете настроить кнопку Scroll to Top так, как вам захочется. Преимущество в том, что данная кнопка реализована на популярном фреймверке jQuery, который используется практически на каждом сайте.

Для начала, нам понадобиться картинка кнопки наверх. Для этого можете скачать любую стрелочку или нарисовать сами. Сохраните ее под именем arrow. png . Как вы уже догадались, эта картинка и будет нашей кнопкой наверх.

В header страницы или в отдельном css файле, установим css стили для div блока с id=scroller.

#scroller{ position: fixed; /** позиция кнопки scroll to top **/ bottom: 30px; /** картинка кнопки наверх**/ background: transparent url(arrow.png) no-repeat left top; width: 32px; height: 32px; cursor: pointer; /** скрываем кнопку в начале **/ display:none; }

Как видите, прежде всего мы установили фиксированную позицию блока, вы можете поменять размещение кнопки scroll to top с помощью значения bottom. Далее мы устанавливаем фоном нашу стрелочку, которую подготовили на первом этапе. В конце, скрываем кнопку, чтобы ее не было видно, когда страница только загружена.

Как и полагается, мы напишем код скрипта кнопки в секции header.

Для начала подключим библиотеку jQuery, для этого воспользуемся Google CDN. Хотя вы можете подключить из официального сайта jQuery, Microsoft или из своего сервера. Я использую Google CDN, по моему мнению, он работает наиболее быстро.

Создаем JavaScript функцию после загрузки библиотеки jQuery.

$(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 0) { $("#scroller").fadeIn(); } else { $("#scroller").fadeOut(); } }); $("#scroller").click(function () { $("body,html").animate({ scrollTop: 0 }, 400); return false; }); });

Разберемся в коде немного попозже... В начале мы вызываем функцию по загрузке страницы:

$(document).ready(function(){ });

В первой части функции, мы устанавливаем событие на scroll событие. Когда происходит скроллинг окна значение переменной scrollTop более 0, в это время мы выводим кнопку «Наверх», когда скроллинг не происходит, мы ее прячем.

Во второй части функции, мы цепляем обработчик события click на кнопку scroll to top (наверх), когда она нажата, мы анимируем скроллинг к тегу body. То есть происходит скроллинг в начало страницы.

На этом создание базового кода кнопки «Наверх » завершено!

Надеюсь, у вас есть тысячи идей, как сделать эту кнопку красивее и лучше. Все что вам предстоит сделать - это внести свои коррективы в этот скрипт. Для примера, можете добавить изменение стиля кнопки при наведении мыши.

Приветствую дорогие друзья. Сегодня я покажу, как сделать кнопку наверх на сайте. Так уж получилось, что шаблон моего блога не был изначально снабжен этой полезной функцией, и посетители не могли быстро переместиться из нижней части статьи в верхнюю. Поэтому, одновременно с созданием такой кнопки у себя, я расскажу как это сделать вам (Может быть у вас такая же проблема и вы не знали как ее решить).

В статье будут следующие части:

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

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

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

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

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

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

Я рассмотрю два способа снабдить ваш сайт такой кнопкой. Первый будет ориентирован на простые сайты, для которых нет возможности или желания подключать какие-либо дополнительные библиотеки или Javascript.

Для реализации будет достаточно стандартного функционала языка разметки HTML, дополненного CSS стилями. Кнопка вверх будет действовать как обычная ссылка, отправляющая посетителя к началу страницы.

Достоинства:

• Простота и легкость настройки;
• Не нужна поддержка библиотек и скриптов.

Недостатки:

• Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
• Перемещение вверх происходит не плавно, а мгновенно, рывком.

Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.

Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).

Buttonup { width:88px; height:118px; position:fixed; bottom:20px; right:50px; }

Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.

Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:

• Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
• Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
• Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).

Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).

В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:

Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.

Для подключения библиотеки jQuery, вам нужно прописать в разделе вашего сайта следующую строку:

Код скрипта можно вставить двумя способами:

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

Первый вариант проще, второй, на мой взгляд, удобнее.

jQuery(document).ready(function($){ $(""+ "..png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" +"").appendTo("body"); var speed = 550, $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //появление function show_scrollTop(){ ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });

Если вы будете использовать для скрипта отдельный файл, как это сделал я, то в него помещаете код, находящийся между тегами , сами теги копировать в файл не нужно. Файл размещаете у себя на хостинге.

Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:

Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.

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

Итак, задаем стиль кнопки – для этого заходим в админ панель сайта -> Внешний вид -> Редактор (файл style.css ) и в самом конце вставляем следующий код:

a .naverx {
position :fixed;
bottom : 70px;
margin-left : 1020px;
right :5px;
background : #417297 url (http://сайт/wp-content/themes/pressa/images/nawerx.png) center center no-repeat;
width : 32px;
height : 32px;
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
-o-border-radius : 5px;
cursor : pointer;
padding : 15px;
margin : 20px;
opacity : 0.8;
box-shadow : inset 0 1px 0 rgba (255,255,255,0.5), 0 2px 2px rgba (0,0,0,0.3), 0 0 4px 1px rgba (0,0,0,0.2);
-webkit-transition : all 0.2s 0.01s ease;
}

a .naverx :hover {
background : #F0824F url (http://сайт/wp-content/themes/pressa/images/nawerx.png) center center no-repeat;
box-shadow : none !important ;
opacity : 1;
}

ПОЖАЛУЙСТА — замените ссылку изображения кнопки (параметр background :) на ссылку изображения которое Вы загрузили на свой хостинг.
Когда я удалю изображение — и Ваша кнопка тоже пропадет.На время настройки кнопки, можете пользоваться ссылкой, но не забудьте заменить ее!!!

Обязательно сохраняем все настройки, обновляем страничку сайта и если все правильно сделано на Вашем сайте должна появится кнопка НаВерх/Вверх/To Top.

Для того что бы подобрать цвет кнопки под дизайн сайта, находясь на страничке сайта, наведите курсор мышки на кнопку, нажмите правый клик и в меню выберите последний пункт: «Inspect Element ». Ваш браузер откроет, в нижней части, коды html, java и соответствующие им – элементы стиля.

В правой части, найдите стиль «a.naverx » и в параметре background нажмите на квадрат с цветом кнопки.

В появившиеся цветовой гамме выберите нужный цвет кликая курсором внутри квадрата. Как найдете нужный цвет, скопируйте его номер, который начинается с # и замените его на номер «старого » цвета кнопки.

Напоминаю что замена делается в файле style.css и не забудьте сохранить. Кстати, когда Вы будете выбирать цвет, то увидите сразу изменения на экране, так что подбор цвета не самая трудная задача.

Если Вам не все понятно с тем как подобрать цвет, как его заменить и т.д., прошу ознакомится с моим курсом « », где-то в конце курса я рассказываю и показываю о том как можно заменить цвет элемента сайта.

Второй метод предполагает подключение JavaScript , для того что бы при нажатии на кнопку, прокрутка вверх произошла медленней, плавней. Я бы сказал, что это будет выглядеть чуть красивее чем в первом варианте — выбирать Вам. Единственный недостаток это скрипт, который замедляет работу сайта, но не подумайте что это сильно заметно, я сам пользуюсь этим методом.

Итак, картинка у Вас есть (см. выше), далее Вам нужно зайти в файл bottom.php (Внешний Вид -> Редактор ), найти там закрывающиеся тег и прямо перед ним вставить следующий код самого скрипта кнопки НаВерх/Вверх/To Top:

$(function (){$.fn.scrollToTop=function (){$(this).hide ().removeAttr («href»);if ($(window).scrollTop ()!="0"){$(this).fadeIn («slow»)}var scrollDiv=$(this);$(window).scroll (function (){if ($(window).scrollTop ()=="0"){$(scrollDiv).fadeOut («slow»)}else{$(scrollDiv).fadeIn («slow»)}});$(this).click (function (){$(«html, body»).animate ({scrollTop:0},"slow")})}});

//

Сохраняемся, далее заходим в файл style.css , копируем код стиля, который находится выше (a .naverx , a .naverx :hover ), вставляем код и сохраняем изменения.

Заходим на страницу своего ресурса, обновляем страницу и радуемся результату.

Внимание! JavaScript код можно вставлять и в файле header.php а в моей теме WP он установлен в файле theloop.php .

Если код/кнопка вверх не будет работать в одном файле, попробуйте установить код скрипта в другом (из выше перечисленных)– обязательно получится.

В стиле a .naverx , находится параметр margin-left : 1020px; — меняйте его значение (1020px) для того что бы расположить кнопку НаВерх/Вверх/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 .

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

Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop . Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css .

Далее, в заголовок страницы внутри тега ... вставляем следующие строчки, где указан путь к новым файлам и небольшой javascript для инициализации плагина:




$(function(){
$(".scrollUp").liScrollToTop();
});

Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV: