Скролл в начало страницы
Простой способ сделать скролл в начало страницы
Несомненно, для реализации механизма возврата в начало страницы самый простой и очевидный способ: добавить идентификатор для тега html и сделать на него ссылку перед закрывающим </body>. Например так:
<html id="top">
<body>
<!-- содержимое страницы -->
<a href="#top">Вверх</a>
</body>
</html>
Но и в таком случае, существуют опции, использование которых сделает сайт более привлекательным.
Чтобы прокручивание было гладким, добавим CSS свойство:
html {
scroll-behavior: smooth;
}
Использование идентификатора для тега html - простой и эффективный способ, но он ведет к потере контроля над страницей.
Используем дополнительный элемент:
<html>
<body>
<a id="top"></a>
<!-- содержимое страницы -->
<a href="#top">Вверх</a>
</body>
</html>
Привязка идентификатора к дополнительному элементу позволит сделать возврат к началу страницы с помощью клавиатуры. Хотя в этом случае может потребоваться запустить прокрутку в ответ на клик с помощью JS:
window.scrollTo(0, 0);
Гладкое прокручивание в таком случае можно реализвать с помощью CSS, как описано выше, или добавить в JS:
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
Спасибо за внимание
