Как сделать ссылку на раздел страницы

Короткий ответ

Дайте разделу атрибут id, а в ссылке укажите его после решётки:

<nav><a href="#prices">Prices</a> · <a href="#contacts">Contacts</a></nav>
<p style="height: 200px;">Long text…</p>
<h2 id="prices">Prices</h2>
<p style="height: 200px;">Tea — $3</p>
<h2 id="contacts">Contacts</h2>
<p>hello@example.com</p>

На другую страницу с переходом к разделу ссылаются так же: href="/about#team". Ссылка href="#" без имени ведёт в самое начало страницы — так делают кнопку «Наверх».

Каким должен быть id

Значение id уникально на странице: два элемента с одинаковым id сломают переход. Пишите его латиницей, без пробелов, по смыслу раздела — prices, delivery-terms. Такая ссылка попадает в адресную строку, и ею удобно поделиться: страница откроется сразу на нужном месте.

Плавная прокрутка

Свойство scroll-behavior: smooth у html заменяет резкий прыжок плавной прокруткой:

html { scroll-behavior: smooth; }

Подсветить выбранный раздел

Псевдокласс :target выделяет элемент, к которому привела ссылка:

<style>
  :target { background: lightyellow; }
</style>
 
<a href="#note">Show the note</a>
<p id="note">This paragraph is highlighted after the click.</p>

Частая ошибка

На сайте с фиксированной шапкой заголовок раздела после перехода прячется под ней. Добавьте разделам отступ прокрутки, равный высоте шапки:

h2[id] { scroll-margin-top: 80px; }