Такая функция, как кнопка "вверх" для сайта, делает интернет-ресурс более удобным для его посетителей. Она помогает с легкостью переместиться из любой точки страницы в ее верхнюю часть. Это просто необходимо для интернет-магазинов и сайтов с большими статьями, требующими долгой прокрутки вниз.
Для чего это необходимоНа данный момент на большинстве сайтов такой функции, как кнопка «вверх», нет, и в этом нет ничего критичного. Но ее использование может принести много плюсов как для интернет-ресурса, так и для его посетителей.
Польза для посетителейЧасто бывает, когда страница интернет-ресурса сильно нагружена объемом информации, когда информационная статья занимает много места и приходится прокручивать страницу вниз при помощи колесика мыши. В плюс к этому, в конце статьи может присутствовать множество комментариев к ней.
Когда посетитель читает статью, ничего утомительного в прокрутке вниз страницы нет, но когда текст подошел к концу и надо перемещаться вверх, то это начинает немного утомлять. Большинству людей будет просто лень вести долгую прокрутку, и они просто закроют сайт, вместо того чтобы еще прогуляться по его просторам.
Использование кнопки для мгновенного перемещения к верху страницы делает времяпрепровождение на сайте более удобным.
Польза для интернет-ресурсаПоложительные стороны для самого ресурса исходят из прошлых факторов, ведь упрощенное перемещение по сайту улучшает поведенческие факторы, так как все посетители будут более активны в своих действиях и перейдут на другие страницы.
Тем самым данные влияют на отношение всех поисковиков к сайту и приводят к улучшению места в поисковой выдаче.
Как сделать кнопку "вверх" на сайте самостоятельно
Чтобы добавить кнопку "вверх" на сайте, для начала потребуется сделать саму иконку, при нажатии на которую пользователь переместится вверх страницы. Для этого можно использовать готовые варианты, среди которых всегда можно подобрать наиболее подходящий.
Чтобы улучшить вид кнопки, необходимо сделать некоторые доработки, а именно сделать спрайт, позволяющий на основе CSS объединить фоновые картинки, тем самым сотворив из них анимацию.
Для графических работ можно воспользоваться любым редактором. Но самым удобным вариантом будет онлайн-сервис PIXLR, так как скачивать здесь ничего не нужно и можно пользоваться им прямо в браузере.
Для начала работы в появившемся окне редактора нужно выбрать поле «Загрузить изображение с компьютера». В качестве примера возьмем изображение ракеты.
Если габариты выбранной иконки слишком велики, то потребуется сделать небольшую корректировку размеров. Для этого необходимо перейти в верхнее меню и выбрать поле «Редактировать», а после «Free transform…»
Далее рядом с картинкой появляются специальные маркеры, перемещая которые, можно изменить размер изображения. Для сохранения пропорций можно использовать клавишу Shift, зажав которую, нужно перемещать голубые маркеры. В конце данных действий получается изображение ракеты.
Следующее действие - создание копии слоя.
Теперь необходимо переместить картинку ракеты из нового слоя немного вверх. Для этого будет удобно использовать инструмент перемещения, который располагается во второй колонке левого меню, и стрелку «вверх» на клавиатуре.
Теперь нужно сделать верхнюю картинку черно-белой. Это можно сделать при помощи пункта «Коррекция» - «Цветовой тон/Насыщенность» в верхнем меню. Для полного обесцвечивания ползунок «Насыщенность» должен принять значение -100. Данное действие позволит сделать эффект, при котором кнопка «Вверх» будет превращаться из черно-белой в цветную при наведении на нее.
Последний штрих - удаление лишнего пространства вокруг двух картинок. Для этого выбираем пункт «Обрезка» из левого меню и выделяем в прямоугольник лишь две ракеты. Для совершения обрезки нажимается клавиша Enter.
Получилось изображение, в котором нет лишнего свободного пространства. Потребуется записать значения ширины и высоты получившейся картинки, так как эти данные будут полезны на следующем шаге.
Для сохранения нужно нажать на «Файл» - «Сохранить», где в левом пункте «Мой компьютер» записываем имя изображения (только английская раскладка), выбираем формат (в данном случае - PNG) и нажимаем кнопку «Да».
Файл со скриптом кнопки «вверх»Писать скрипт в данном случае не нужно. Можно будет воспользоваться общедоступным вариантом, внося в готовый код некоторые поправки.
Для этого потребуется скачать любой редактор кода. Самый популярный и к тому же бесплатный вариант - это Notepad ++. После его установки нужно скопировать и вставить в него весь данный код:
| $(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;}); }); |
Для установки кнопки прокрутки вверх для сайта, нужно разместить в требуемом месте код. Вписывать его нужно перед тегом .
Создание стиля кнопки в CSSЧаще всего кнопка "вверх" для сайта располагается в нижней части («подвале»).
В файл style.css сайта необходимо внести следующий код:
В данном случае и понадобятся те данные ширины и высоты изображения. Осталось лишь ввести полученные данные в код, и кнопка "вверх" для сайта будет готова! Что еще?
Кнопка "вверх" для сайта на Wordpress
Для данной CMS кнопку «Вверх» можно сделать при помощи плагинов, а также самостоятельно.
Способ с плагинами наиболее удобен и прост в установке, так как для этого потребуется лишь нажать на кнопку установки и настроить весь функционал в меню плагина.
К выбору последнего стоит подойти с осторожностью, так как вместе с ним можно будет легко приобрести вирус на сайт. Наиболее популярный и проверенный вариант - это плагин под названием Scroll Back To Top. Загрузить его можно при помощи стандартного поиска плагинов Wordpress.
Данное расширение обладает множественным функционалом, и будет очень просто индивидуализировать кнопку "вверх" для сайта на Wordpress. Все значения изменять совсем не обязательно, потребуется настроить только вид и местоположение кнопки на странице сайта.
Как видно, установка кнопки «вверх» при помощи плагинов очень проста. Но существует один важный нюанс, заключающийся в том, что каждый установленный плагин нагружает CMS. Это может сказаться на быстродействии интернет-ресурса. Именно поэтому большая часть владельцев сайтов стараются выполнять все изменения непосредственно в коде, а не при помощи сторонних расширений. Можно сделать кнопку "вверх" для сайта на HTML, что максимально сократит потребляемые ресурсы.
Перед изменением всех системных файлов Wordpress необходимо сделать их резервные копии. Далее можно руководствоваться всеми шагами по созданию своей кнопки, описанными выше.
Кнока "вверх" для Joomla
CMS Joomla также поддерживает установку плагинов, как и Wordpress. Наиболее удачным вариантом кнопки "вверх" для сайта на Joomla 3 является расширение под названием Top of the Page.
В данной CMS любой плагин может быть установлен через «Менеджер расширений». Для этого необходимо:
Теперь необходимо его активировать в «Менеджере плагинов». Для этого необходимо перейти в данный раздел, найти плагин и переключить его состояние на «включено».
Top of the Page имеет следующий функционал:
Для самостоятельной настройки стиля кнопки «вверх» необходимо обладать хотя бы минимальными знаниями CCS. В противном случае стоит переключить значение предпоследнего параметра на «Нет».
Еще один важный нюанс заключается в том, что обычная надпись на иконке содержит англоязычный текст: Return to Top. На русскоязычном сайте подобный текст присутствовать не может, поэтому стоит просто отключить его в параметрах плагина либо изменить на русский.
Для изменения данной надписи необходимо зайти на сервер сайта при помощи FTP или встроенного в хостинге файлового менеджера. Далее в директории «/administrator/language/en-GB/» нужно найти файл под названием «en-GB.plg_system_topofthepage.ini».
Перед изменением текста стоит изменить кодировку данного документа на UTF-8. Это позволит сделать нормальное отображение русских букв.
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Return to Top" " |
и изменяем фразу в кавычках на русскоязычную. Можно использовать такие фразы, как «Вверх!», «В начало!» или «Наверх!».
Кнопка "вверх" для Ucoz
Кнопку "вверх" для сайта на Ucoz придется делать с помощью внедрения кода, так как подключение плагинов для данной CMS невозможно. Однако для этого не потребуется долго изучать файлы системы и искать необходимые строки, потребуется лишь вставить небольшой код в необходимое место.
Для установки нам потребуется:
После этого в нижнем правом углу появится иконка, перемещающая пользователя к самому верху страницы.
Как было видно, установка кнопки «Вверх» для любой из CMS не была особо трудной. Можно использовать как автоматизированный способ установки (плагины), так и ручной. Однако последний вариант остается наиболее подходящим, так как не оказывает негативного влияния на быстродействие сайта.
Можно использовать кнопку "вверх" для сайта на HTML, чтобы максимально сократить потребление ресурсов сайта, так как большое число расширений может оказать негативное влияние на быстродействие ресурса. Один плагин кнопки "вверх" не сможет сильно повлиять на время загрузки страниц сайта, но в большинстве случаев у пользователя присутствует как минимум десяток плагинов, установленных на CMS. В данном случае любой плагин может негативно повлиять на быстродействие страниц сайта.
Плавная прокрутка для сайта реализована на jQuery. Кнопка прокрутки появляется на странице, когда положение полосы прокрутки браузера достигает установленного в коде нужного значения (код приведен ниже), другими словами – кнопка появится только тогда, когда пользователь прокручивает страницу немного вниз.
Этот код лучше вставить в самом низу страницы, перед закрывающимся тегом . В css для #back-top объявляем свойство position: fixed и позиционируем в правую нижнюю часть страницы. Элемент span нужен только для отображения стрелки, он не обязателен и его можно удалить, если вам не нужна графическая стрелка на кнопке.
2. CSS – разметка #wrapper{ margin:0 auto; width:900px; position:relative; } /*Стилизация кнопки ВВЕРХ */ #back-top{ position:fixed; bottom:30px; left:50%; margin-left:500px } #back-top a{ width:64px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; color:#bbb; /* background color transition */ -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover{color:#000;} /* графическая стрелка ВВЕРХ */ #back-top span{ width:64px; height:64px; display:block; margin-bottom:7px; background:#ddd url(up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; /* background color transition */ -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover span{background-color:#777} 3. JavascriptПервым делом подключаем библиотеку . Для этого перед закрывающемся тегом head вставляем код:
Далее приведен код, который можно вставить в тело страницы или вывести в отдельный javascript файл. Скрипт сравнивает положение scrollTop скроллбара окна со значением 100 (значение указано в пикселях и его можно поменять на другое), если больше 100, то кнопка плавно появляется, иначе затухает.
$(document).ready(function(){ // появление/затухание кнопки #back-top $(function (){ // прячем кнопку #back-top $("#back-top").hide(); $(window).scroll(function (){ if ($(this).scrollTop() > 100){ $("#back-top").fadeIn(); } else{ $("#back-top").fadeOut(); } }); // при клике на ссылку плавно поднимаемся вверх $("#back-top a").click(function (){ $("body,html").animate({ scrollTop:0 }, 800); return false; }); }); });
Также обратите внимание на случай, если будет выключен javascript в браузере пользователя. Чтобы предусмотреть поведение стрелки и в этой ситуации необходимо к элементу body добавить id=”top”, а в ссылку к кнопке добавить якорь: , который является id тега body. Т.е. при выключенном javascript будет происходить просто скачок в начало страницы без анимации.
Архив с исходником можно забрать .
Если вы столкнулись с какой-то проблемой по установке этого скрипта отпишитесь в комментариях о возникшей проблеме и ответ не заставит себя долго ждать.
Кроме этого, за отдельную плату, можете заказать установку этого скрипта на свой сайт. Для этого напишите заявку по любому из адресов, указанных на странице контактов или через форму обратной связи. Скрипт будет установлен аккуратно, без опасности повредить что-нибудь на вашем сайте!
Ах, как быстро привыкает человек к удобству, независимо, где он находится: дома или на сайте! Не знаю как вы, но я привык пользоваться кнопкой «Наверх»
, а особенно это удобно, когда статья больших размеров.
Итак, в этой статье я расскажу, как сделать кнопку «Наверх» для сайта
, используя библиотеку jQuery.
1. Подключим библиотеку jQuery. Кстати, об этом я писал недавно .
Добавьте между тегами …
вот этот код:
2. Добавляем между тегами саму кнопку-ссылку «Наверх»:
наверх наверх
и сразу после кнопки «Наверх» добавьте код JavaScript:
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 450); return false; }); });
Обратите внимание на строку №6
, там есть цифра 100 – она указывает, через какое количество слов должна появляться кнопка «Наверх». Вы можете указать любую другую подходящую для вас цифру.
В строке №11
есть цифра 450 – указывает скорость подъема страницы. Вы можете тоже указать свою цифру. Чем выше цифра, тем медленнее страница поднимается наверх, чем меньше цифра, тем быстрее страница окажется наверху.
3. Теперь добавьте код CSS. Кто не знает, как подключить CSS к HTML файлу, почитайте об этом тут.
A#move_up { position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none; } a#move_up:hover { opacity:0.9; filter: alpha(opacity=90); }
Вот это и все. Вот так выглядит полностью готовый код:
a#move_up{ position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none;} a#move_up:hover{ opacity:0.9; filter: alpha(opacity=90);} Ваш текст (желательно больше текста) наверх $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 50); return false; }); });
Теперь при прокрутке страницы вниз будет появляться небольшой синий полупрозрачный блок с надписью «Наверх».
По многочисленным просьбам я написал урок по созданию перехода на верх страницы, как на сайте Web Designer Wall . Это очень просто сделать с помощью jQuery (каких-то пару строчек кода). Необходимо сравнить значение позиции верхней полосы прокрутки с определенным значением, и если первое из них больше, отобразить кнопку перехода на верх. Как только пользователь кликает по кнопке, производится переход на верх страницы.
$(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); // scroll body to 0px on click $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }); });
А что, если JavaScipt не поддерживается?Заметьте, что кнопка перехода на верх ссылается на якорь #top, который является идентификатором тега body. В принципе, нет необходимости задавать какую-либо ссылку-якорь, так как jQuery позволяет прокручивать на любую часть страницы. Тем не менее лучше её все-таки задать на случай, если JavaScript не поддерживается в том или ином браузере.
| 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
Вот и всё, простая, но очень удобная кнопка Наверх для сайта с функцией возврата готова. Вы можете настроить ее стиль самостоятельно, который будет подходить под ваш сайт.
Желаем вам творческих успехов и довольных пользователей!
