Навигация по одному сайту с использованием href = "# О нас" не работает на небольших устройствах

Question

В моем проекте django я пытаюсь создать меню для навигации по одному сайту. Навигация должна выполняться с помощью href="#about us" Меню имеет три размера, один для больших экранов (ПК), один для средних экранов (планшеты) и один для небольших экранов (телефоны). Навигация работает в меню размера ПК, но не работает в других. Чтобы было понятно, все меню перенаправляют пользователя на что-то вроде mywebsite.com/info#about us, но только меню ПК фактически прокручивает сайт. Там я заполняю меню некоторым контентом из базы данных:

{% block big-menu %}
    {% for faq in question_list %}
      <a href="#{{faq.question}}" class="w3-button w3-bar-item w3-hover-text-blue">{{faq.question}}</a>
    {% endfor %}
{% endblock %}

{% block small-menu %}
    {% for faq in question_list %}
      <a href="#{{faq.question}}" class="w3-button w3-bar-item w3-hover-text-blue">{{faq.question}}</a>
    {% endfor %}
{% endblock %}

А есть шаблон для меню:

  <div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-right w3-hide-small" style="width:300px;right:0;top:0;" id="mySidebar">
    <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()"><h3>Menu &times;</h3></button>
    <a class="w3-bar-item w3-large w3-hide-small w3-hide-medium"><h3>Menu</h3></a>
    {% block big-menu %}
    {% endblock %}
  </div>

  <div class="w3-bar-block w3-collapse w3-animate-right w3-hide-large w3-hide-medium w3-light-gray" style="display:none;" id="smallSidebar">
    <a class="w3-bar-item w3-large"><h3>Menu</h3></a>
    {% block small-menu %}
    {% endblock %}
  </div>

И там я назначаю идентификаторы для контента, на который я ссылаюсь в меню:

 <div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
  {% for faq in question_list %}
        <div class="w3-card-4" id="{{faq.question}}">
        <h3 class="w3-container w3-blue">{{faq.question}}</h3>
        <div class="w3-container">
        {{faq.answer}}
        </div>
        </div>
  {% endfor %}
  </div>

  <div class="w3-hide-large">
  {% for faq in question_list %}
        <div class="w3-card-4" id="{{faq.question}}">
        <h3 class="w3-container w3-blue">{{faq.question}}</h3>
        <div class="w3-container">
        {{faq.answer}}
        </div>
        </div>
  {% endfor %}
  </div>

Есть скриншоты рабочего и не рабочего меню:

Answer 1

Проблема была вызвана тем, что два элемента (большой контент и маленький) имели одинаковый идентификатор ({{faq.question}}). Итак, исправление выглядит следующим образом:

{% block big-menu %}
    {% for faq in question_list %}
      <a href="#{{faq.question}}big" class="w3-button w3-bar-item w3-hover-text-blue">{{faq.question}}</a>
    {% endfor %}
{% endblock %}

{% block small-menu %}
    {% for faq in question_list %}
      <a href="#{{faq.question}}" class="w3-button w3-bar-item w3-hover-text-blue">{{faq.question}}</a>
    {% endfor %}
{% endblock %}

{% block body %}
  <h1>Vitosoft - FAQ</h1>

  <div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
  {% for faq in question_list %}
        <div class="w3-card-4" id="{{faq.question}}big">
        <h3 class="w3-container w3-blue">{{faq.question}}</h3>
        <div class="w3-container">
        {{faq.answer}}
        </div>
        </div>
  {% endfor %}
  </div>

  <div class="w3-hide-large">
  {% for faq in question_list %}
        <div class="w3-card-4" id="{{faq.question}}">
        <h3 class="w3-container w3-blue">{{faq.question}}</h3>
        <div class="w3-container">
        {{faq.answer}}
        </div>
        </div>
  {% endfor %}
  </div>

Answer 2

Сценарий jquery сделает это, попробуйте следующее:

$("a").on('click', function(event) {
     # Distinguish the a tags with others by adding a class, like $('a.anchor').click
     if (this.hash !== "") {
        event.preventDefault(); // prevent the default behavior of the link
        var hash = this.hash;

        $('html, body').animate({ # With just a smooth animation within 800 miliseconds, we scroll towards the target anchor
                scrollTop: $(hash).offset().top // we scroll 
            }, 800, function(){

            // window.location.hash = hash; // Optional here
            // this will return the part of the URL that follows the # symbol, including the # symbol.
        });
     } // End if
});