Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.
Для создания такой ссылки, в её адресе достаточно указать #top (пример 1). Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.
Пример 1. Ссылка на верх
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Ссылка</title>
<style>
div {
height: 2000px; /* Высота */
}
</style>
</head>
<body>
<div>Прокрутите веб-страницу в самый низ.</div>
<p><a href="#top">Наверх</a></p>
</body>
</html>
Здесь элемент <div> используется для искусственного создания длинной веб-страницы, чтобы стал заметен переход от нижней к верхней части документа. Заметьте также, что какая-либо дополнительная разметка не требуется.
Если необходимо сделать переход к определённому месту, то его сперва следует обозначить с помощью атрибута id, задав ему уникальное имя:
<div id="main">…</div>
После этого в ссылке мы можем указать это имя следующим образом:
<a href="#main">Наверх</a>
Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к <button> добавляем событие onclick, внутри которого пишем window.location.href со значением #top (пример 2).
Пример 2. Кнопка на верх
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
div {
height: 2000px; /* Высота */
}
</style>
</head>
<body>
<div>Прокрутите веб-страницу в самый низ.</div>
<p><button onclick="window.location.href='#top'">Наверх</button></p>
</body>
</html>
При написании значения onclick обратите внимание на комбинацию двойных и одинарных кавычек. Если кнопка не работает должным образом, кавычки надо проверить в первую очередь.