Кнопка наверх с помощью CSS — «Нубекс»

На чтение 9 мин

Содержание

Кнопка «Наверх» на странице сайта
Как создать кнопку с помощью средств CSS
Как сделать кнопку наверх для сайта
Кнопка наверх: HTML+CSS
Кнопка наверх: JavaScript
Смотрите также:

Кнопка «Наверх» на странице сайта

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

Самый простой вариант такой кнопки — ссылка с рисунком в качестве содержимого. Якорем для ссылки служит идентификатор самого верхнего на странице элемента (то есть элемента, в верхней границе которого будет возвращён пользователь при нажатии на кнопку). Элемент с кнопкой в исходном коде следует разместить в самом конце документа, ближе к закрывающему тегу .

Реальное положение кнопки на странице (а точнее, элемента с кнопкой) следует отрегулировать с помощью средств CSS. Это положение следует выбрать таким, чтобы кнопка как можно меньше мешала просмотру содержимого страницы. Поэтому здесь немаловажным фактором будет размер кнопки и её цвет: она должна быть заметна, но при этом не должна раздражать своим цветом и фактом присутствия. При необходимости кнопку можно сделать полупрозрачной, используя CSS-свойство opacity .

.floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем рисунок-ссылку до нужного момента */ >

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

 window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

Если весь этот код разместить в одном файле, то выглядеть это будет следующим образом:

    charset="utf-8"> Example .floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow display: none;> /* скрываем рисунок-ссылку до нужного момента */   id="top-page"> . . . . . .  class="floating-button"> id="arrow" href="#top-page" title="К началу страницы"> src="files/button.gif" width="40" height="40" alt="">

window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

А так это может выглядеть в браузере:

Примечание: Если в сценариях на странице планируется использовать функции из библиотеки jQuery, то вышеприведённый исходный JavaScript-код можно заменить следующим:

  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">  $(document).ready(function()< $(window).scroll(function() < if($(window).scrollTop() > 550) < // показываем элемент, если страница прокручена вниз // более, чем на 550 пикселей $('#arrow').show(); > else < // иначе делаем элемент скрытым $('#arrow').hide(); > >); >);

Возврат к началу страницы в вышеприведённых примерах организован как переход по ссылке, поэтому происходит он быстро. Однако иногда для возврата к началу страницы имеет смысл использовать медленный скроллинг (прокрутку) документа. Не для всех сайтов это подойдёт, но в некоторых случаях это выглядит довольно эффектно.

Реализовать такую прокрутку страницы можно с помощью JavaScript, а точнее, с помощью метода scrollBy() объекта window . Вызов функции скроллинга будет происходить из событийного атрибута onclick элемента, представляющего собой кнопку.

Пример одного из вариантов JavaScript-кода для медленной прокрутки содержимого:

 // Функция прокрутки страницы к началу // (вызывается после клика по кнопке "Наверх") var scrollToStart = function() < if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) < // Если не достигнута верхняя граница страницы, // прокручиваем страницу вверх на 200 px window.scrollBy(0,-200); setTimeout(scrollToStart, 5); // повторный вызов функции через 5 ms > > // Функция показа/скрытия кнопки "Наверх" window.onscroll = function() < var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 550) < // Если страница прокручена вниз более, чем на 550 пикселей, // выводим кнопку на экран document.getElementById('arrow').style.display = 'block'; > else < // В противном случае убираем кнопку с экрана document.getElementById('arrow').style.display = 'none'; > >

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

    charset="utf-8"> Example .floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем рисунок до нужного момента */ cursor: pointer; /* задаем вид курсора */ > . . .  class="floating-button"> src="files/button.gif" width="40" height="40" alt="" id="arrow" title="К началу страницы" onclick="scrollToStart(); return false;">

src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> $(document).ready(function()< $(window).scroll(function() < if($(window).scrollTop() > 550) < // показываем элемент, если прокручено вниз // более, чем на 550 px $('#arrow').show(); > else < // иначе делаем элемент скрытым $('#arrow').hide(); > >); $('#arrow').click(function() < // при клике прокручиваем страницу вверх $('body,html').animate(< scrollTop: 0 >, 400); return false; >); >);

Как создать кнопку с помощью средств CSS

Если под существующий дизайн страницы не удаётся подобрать подходящую рисованную кнопку, её можно попробовать создать с помощью средств CSS. Для этого в HTML-коде следует заменить тег (рисунок кнопки) подходящей текстовой строкой, например, следующего содержания:

id="top-page"> . . . . . . class="floating-button"> id="arrow" href="#top-page">⇑ Вверх

.floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем кнопку до нужного момента */ padding: 9px 15px 4px; /* размер кнопки */ color: #000000; /* цвет надписи */ background: #b0e4ee; /* цвет фона */ border: 1px solid #767676; /* параметры рамки */ border-radius: 3px; /* скругляем углы */ text-decoration: none; /* убираем стандартное подчеркивание */ font: 12pt sans-serif; /* параметры шрифта */ >

charset="utf-8"> Example .floating-button < position: fixed; /* фиксируем позицию */ top: 20px; /* расстояние от верхней границы экрана */ right: 20px; /* расстояние от правой границы экрана */ > #arrow < display: none; /* скрываем кнопку до нужного момента */ padding: 9px 15px 4px; /* размер кнопки */ color: #000000; /* цвет надписи */ background: #b0e4ee; /* цвет фона */ border: 1px solid #767676; /* параметры рамки */ border-radius: 3px; /* скругляем углы */ text-decoration: none; /* убираем стандартное подчеркивание */ font: 12pt sans-serif; /* параметры шрифта */ > id="top-page"> . . . . . . class="floating-button"> id="arrow" href="#top-page">⇑ Вверх

Как сделать кнопку наверх для сайта

На сайтах с большим количеством контента (например, блоги) просто необходимо использовать кнопку «Наверх». Ведь пользователю, прочитавшему большую статью, может понадобиться вернуться в верхнюю часть страницы для продолжения навигации по сайту. Или посетитель, перед тем как прочитать статью полностью, пролистывает ее от начала до конца и пробегает глазами по заголовкам, картинкам, схемам, чтобы заранее оценить, стоит читать статью или нет. Обычно, в таких случаях, при отсутствии кнопки «Вверх», посетитель просто скролит страницу вверх колёсиком мыши или при помощи скрола (в боковой части браузера).

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

Кнопка наверх: HTML+CSS

Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:

.topNubex Вверх

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

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

#topNubex

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки «Наверх» на сайт.