Как сделать ссылку на верх веб-страницы?
Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.
Для создания такой ссылки, в её адресе достаточно указать #top (пример 1). Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.
Пример 1. Ссылка на верх
<!DOCTYPE html> <html> <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> <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 обратите внимание на комбинацию двойных и одинарных кавычек. Если кнопка не работает должным образом, кавычки надо проверить в первую очередь.
Автор: Влад Мержевич
Источник: webref.ru