Боковая панель прокрутите вниз до раздела

У меня есть боковая панель со списком элементов, где пользователи могут перейти на определенные страницы. Я хотел бы сделать так, чтобы пользователь мог нажать на элемент и прокрутить вниз до раздела, но он должен переходить к разделу только при нажатии на эту кнопку.

Проблема в том, что мой тег a выглядит следующим образом:

<a href="{% url 'article_list' %}">
    <li class="nav_list">go to section</li>
</a>

Так что я не в состоянии следовать этому шаблону:

<html>
  <body>
     <a id="top"></a>
      <!-- the entire document -->
      <a href="#top">Jump to top of page</a>
  </body>
</html>

Потому что, как вы видите, тег a уже ссылается на article_list.

Я использую Django 3.2 и Bootstrap 5.

Любой совет о том, как это можно легко реализовать, будет оценен по достоинству.

Для того чтобы использовать это, вам нужно установить тег anchor href ссылки на ваш верхний элемент id. Вы можете поступить следующим образом, создав еще один тег якоря

<a href="#top">Scroll Up</a>

или вы можете создать любой тег eg.(<span>) и добавить список событий

<span onclick="ScrollUp()">Scroll Up</span>

function ScrollUp(){
  window.scroll({
    top: 0, 
    left: 0, 
    behavior: 'smooth'
  });
}

Вы можете использовать onmouseover="ScrollUp()" для прокрутки вверх без нажатия на элемент, пользователь просто должен навести курсор на него, но это менее удобно для пользователя, я думаю

Вернуться на верх