Для прокрутки страницы к элементу необходимо, во-первых, добавить элементу уникальный идентификатор:
<div id="anchor">...</div>
Во-вторых, указать этот идентификатор в ссылке для прокрутки страницы к элементу:
<a href="#anchor">Перейти к элементу</a>
Для того, чтобы страница прокручивалась плавно, а не перепрыгивала к элементу, в стили можно добавить свойство:
html {
scroll-behavior: smooth;
}
Теперь, при клике по ссылке, страница плавно прокрутится к элементу, но, при этом, в адресной строке к текущему URL-адресу страницы добавится его идентификатор:
https://example.com/#anchor
Такое поведение иногда является нежелательным.
Для прокрутки страницы к элементу без изменения URL-адреса необходимо добавить на страницу несколько строк JavaScript-кода:
<script type="module">
const links = document.querySelectorAll("a[href^='#']");
links.forEach((link) => {
const href = link.getAttribute('href');
const target = href === '#' ? 'body' : href;
link.addEventListener('click', (event) => {
event.preventDefault();
document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
});
});
</script>
При этом, вносить изменения в исходный HTML-код не потребуется.