How to maintain scroll position of bootstrap table on reload?

Question

I have a bootstrap table that looks like this.

    <div class="row">
    <table id="question-selection" class="table table-sm table-hover table-wrapper">
        <tbody>

            {% for placer in chapter_questions %}

            {% if placer == question %}

            <tr id="active-table" style="transform: rotate(0);">

            {% else %}

            <tr style="transform: rotate(0);">

            {% endif %}

                <th scope="row">

                    <a href="{% url 'question' placer.slug %}" class="stretched-link"></a></th>

                <td class="pr-3 pl-3 pt-2 pb-2">{{ placer|truncatewords:10 }}</td>
            </tr>

            {% endfor %}

        </tbody>
    </table>
</div>

I want the active row in the table to be in the frame, as I cannot see what is currently clicked. Also, when I reload the page I want it to maintain the scroll position.

Answer 1

I finally got it to work with a little bit of jQuery in my code. Here it is for anyone who is dealing with the same problem.

   <script>

        var current_pos = $('#active-table').position().top;

        $(document).ready(function () {
            $("table").scrollTop(current_pos);
        });

    </script>