BootStrap Off Canvas Anchor

Question

I'm using Off Canvas from Bootstrap and have anchor tags inside the off canvas. Whenever I click on the link, it does scroll down at the back, but the moment I close the Off Canvas, it scrolls back up from where it started. I don't understand why this problem is occurring.

This is the code I am using:

<div class="d-flex justify-content-center">
        <div class="p-2">
            <h5>CHOOSE EDUCATIONAL INSTITUTION: </h5>
        </div>
        <div class="p-2">
            <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                CHOOSE
            </button>
        </div>
    </div>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabe">INSTITUTIONS</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="list-group list-group-flush">
                <a href="#schools"  class="list-group-item list-group-item-success list-group-item-action">SCHOOLS</a>
                <a href="#intermediate"  class="list-group-item  list-group-item-action">IPE COLLEGE</a>
                <a href="#polytech"  class="list-group-item list-group-item-success list-group-item-action">POLYTECHNIC COLLEGE</a>
                <a href="#undergrad"  class="list-group-item list-group-item-action">UNDERGRAD</a>
                <a href="#pg"  class="list-group-item list-group-item-success list-group-item-action">POSTGRAD</a>
                <a href="#phd"  class="list-group-item list-group-item-action">PHD</a>
            </ul>
        </div>
    </div>

I tried adding

    data-bs-dismiss="offcanvas"

But doing this doesn't close the off canvas in any way (made it worse)