Как прокрутить блокировку веб-страницы Django HTML

В настоящее время я использую страницу, которая имеет список встроенных форм

Однако, когда пользователь вводит данные в каждую форму (строку), он возвращается в начало страницы. Это становится очень утомительным, так как пользователям нужно быстро вводить данные, а они не могут этого делать, когда им нужно прокручивать страницу в течение 2 минут каждый раз, когда они добавляют запись.

Кто-нибудь знает, как реализовать блокировку прокрутки, чтобы этого не происходило

Views.py: Функция:

class AvonleaView( View):

def get(self,request):
    created_nums= AvonleaClass.objects.all().values('unitNumber')

    Aprev = AvonleaClass.objects.all().order_by('-unitDateEntered')
    # created_nums= AvonleaClass.objects.all()
    print(created_nums )

    created_nums =[int(i['unitNumber']) for i in created_nums]
    print(created_nums )

    form = AvonleaForm()
    return render(request,"meter_readings/avonlea.html",{'form':form , 'created_nums':created_nums })

def post(self,request):
    created_nums= AvonleaClass.objects.all().values_list('unitNumber')
    print(created_nums)
    form = AvonleaForm(request.POST)
    if form.is_valid():
        form.save()
        return redirect('Avonlea')
        messages.success(request , 'creates successfully ')
    else:
        return render(request, 'meter_readings/avonlea.html', {'form': form ,  created_nums:created_nums })

HTML-страница :

{% extends 'meter_readings/base.html' %}

{% block content %}
<!-- CSS only -->


<div class="container" font-size= 8px>
<center><h1>Avonlea Meter Readings</h1></center>
<br>
<head>
  <meta name="viewport" content="width=device-width">
  
</head>
{% for unit_number in form.unitNumber %}
<h6>{{ error }}</h6>


<form class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >
  {% csrf_token %}
  <div class="container">
    <div class="row mb-3">
<div class="col">
  <h5 style="font-size: 14px"> Unit number </h5>
  {{ unit_number.data.value}}
</div>

<input type="hidden" name="unitNumber" value="{{unit_number.data.value}}">

<div class="col" id="prev{{unit_number.data.value}}" >
  <h5 style="font-size: 14px"> Previous Reading </h5>
  {{ previousReading }}
</div>
<div class="col"   id="readings{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Current Reading </h5>
  {{ form.newReading }}
</div>
<div class="col" id="difference{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Units Used </h5>
  {{ form.difference }}
</div>
<div class="col" id="img{{unit_number.data.value}}">
  {{ form.image }}
</div>
<div class="col">
<button id="form.id" class="btn btn-success " type="submit"   {% if unit_number.data.value in created_nums %}  disabled {% endif %} > Save</button>
</div>


    </div>
  </div>



</form>

  {% endfor %}

<br>
<br>

Если я правильно понимаю, вы можете добавить #<some_id> к атрибуту action ваших форм, и когда страница загрузится, браузер автоматически поместит элемент с id="some_id" в режим просмотра.

Пример:

<form id="form1" action="#form2" method='POST'>...</form>
...
<form id="form2" action="" method='POST'>...</form>

Если вы отправите #form1 при перезагрузке страницы браузер прокрутит страницу до #form2, даже если она находится в самом низу страницы.

Или, если у вас только одна форма, вы можете сделать:

<form id="form1" action="#form1" method='POST'>...</form>

РЕДАКТИРОВАНИЕ: 

<form id="form{{forloop.counter0}}" action="#form{{forloop.counter}}" class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >
Вернуться на верх