На сайтах с большим количеством контента (например, блоги) просто необходимо использовать кнопку "Наверх". Ведь пользователю, прочитавшему большую статью, может понадобиться вернуться в верхнюю часть страницы для продолжения навигации по сайту. Или посетитель, перед тем как прочитать статью полностью, пролистывает ее от начала до конца и пробегает глазами по заголовкам, картинкам, схемам, чтобы заранее оценить, стоит читать статью или нет. Обычно, в таких случаях, при отсутствии кнопки "Вверх", посетитель просто скролит страницу вверх колёсиком мыши или при помощи скрола (в боковой части браузера).
Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.
Кнопка наверх: HTML+CSSПреимущество данного способа - простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).
Кнопка наверх с помощью CSS - "Нубекс" .topNubex { position: fixed; right: 45px; bottom: 45px; } Вверх
К недостаткам данного способа относится то, что в таком случае прокрутка не может быть плавной и посетитель мгновенно перенаправляется в верхнюю часть страницы.
Кнопка наверх: JavaScriptПриведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.
Кнопка "Вверх" при помощи JavaScript - "Нубекс"
#topNubex {
position: fixed;
right: 45px;
bottom: 45px;
}
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$("#topNubex").fadeIn();
} else {
$("#topNubex").fadeOut();
}
});
$("#topNubex").click(function() {
$("body,html").animate({scrollTop:0},700);
});
});
В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки "Наверх" на сайт.
При наличии значительного объема контента в материалах сайта веб-мастера используют так называемую "кнопку вверх" (scroll to top). Данная кнопка позволяет моментально пролистать контент к началу страницы, тем самым избавив пользователя от муторной ручной прокрутки.
Работу кнопки "scroll to top" Вы можете лицезреть на данной странице блога .
В качестве самой кнопки используется изображение в формате png , именно поэтому для начала следует подыскать для себя нужный вариант картинки. Для этого подойдет качественный сервис иконок iconfinder.
HTML код вывода кнопкиВставка блока div с идентивикатором arrowup осуществляется между тегами ... исполняемого файла шаблона (обычно это файл index.php). В шаблонах студии Yootheme это файл theme.php, который находится в папке "layouts".
CSS стили оформления кнопки
Код CSS стилей кнопки, который прикреплен к классу arrowup , размещается в любом подключенном к шаблону CSS файле. Обычно используется файл style.css, который размещается в папке "css".
#arrowup { position: fixed; right: 30px; /*позиция кнопки: отступ справа*/ bottom: 30px; /*позиция кнопки: отступ снизу*/ background: url(/images/arrowup.png); /*путь к изображению кнопки*/ width: 48px; /*размер кнопки по ширине*/ height: 48px; /*размер кнопки по высоте*/ cursor: pointer; display: none; opacity: 0.8; /*уровень прозрачности в статике*/ } #arrowup:hover { opacity: 1; /*уровень прозрачности при наведении*/ }
JS код для работы кнопкиJavaScript код, реализующий функционал кнопки, размещается либо между тегами ... исполняемого файла шаблона (index.php), либо перед закрывающим тегом .
$(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 0) { $("#arrowup").fadeIn(300); //скорость исчезновения кнопки } else { $("#arrowup").fadeOut(200); //скорость появления кнопки } }); $("#arrowup").click(function() { $("body,html").animate({ scrollTop: 0 }, 200); //скорость прокрутки return false; });});
Как скрыть "кнопку вверх" на мобильных устройствахМногие веб-мастера скрывают "кнопку вверх" при отображении сайта на мобильных устройствах из-за её ненадобности. Для скрытия кнопки "scroll to top" в мобильных устройствах используется css медиа запрос @media (прописывается все в том же css файле style.css):
@media only screen and (max-width: 568px) { #arrowup {display: none;} }
Был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга - кнопка возврата в начало страницы .
Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами 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:
