Html переход на начало страницы

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

Содержание

Кнопка «Наверх» на странице сайта
Как создать кнопку с помощью средств CSS
Особенности ссылок «вверх страницы»

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

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

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

Реальное положение кнопки на странице (а точнее, элемента с кнопкой) следует отрегулировать с помощью средств 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">⇑ Вверх

Особенности ссылок «вверх страницы»

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

Классически подобная ссылка верстается так:

Недостатком этого метода является то, что необходимо какой-то элемент вверху страницы поместить в якорь (), так как некоторые браузеры не понимают пустые якоря. Кроме того, при переходе к якорю в Internet Explorer исчезает название страницы в заголовке браузера, и не совсем логично работает кнопка Back.

Но от этих проблем можно избавиться, перехитрив браузер. Для этого достаточно просто указать пустую ссылку вверх страницы, не задавая никаких якорей. Браузер без лишних раздумий прокрутит страницу вверх. Я специально посмотрел в спецификации, что она имеет сказать на этот счёт, но не нашел никаких указаний, как UA должен действовать в ситуации, когда имя якоря не указано. Хорошо, что в этом недокументированном поведении абсолютно все браузеры проявляют единодушие.

Наконец, хотелось бы указать ещё один способ установки ссылки «вверх страницы». Он основан на JavaScript и не вызывает никаких побочных эффектов:

Здесь был использован метод window.scroll(x,y), который позволяет промотать страницу на указанное количество пискелов по горизонтали (x) и вертикали (y). Если мы обнулим эти два параметра, то будет восстановлен статус кво — страница проскролится в начало.

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

P. S. Как правильно подсказал Николай Меркин, наиболее совместимым решением будет такой вариант: