When closing the menu in Bootstrap, the page automatically scrolls back to the top

Question

When closing the menu in Bootstrap, the page automatically scrolls back to the top

Whenever I open my menu, click on a link, and scroll down the page using the menu, upon closing the menu I am automatically taken back to the top of the page.

I have experimented with the following scripts:

let y = window.scrollY;
let offcanvas = document.getElementById('offcanvasMenu');
offcanvas.addEventListener('hidden.bs.offcanvasMenu', (e) => {
   window.scrollTo(0, y);
});

and

var myOffcanvas = document.getElementById('offcanvasNav')
myOffcanvas.addEventListener('hide.bs.offcanvas', function (e) {
    console.log(e)
    //e.preventDefault()
    //e.stopPropagation()
})

Unfortunately, none of these scripts have provided a solution for my issue.

Code Snippet

<a class="bi bi-list offcanvas-icon" data-bs-toggle="offcanvas" href="#offcanvasMenu" role="button" aria-controls="offcanvasMenu"></a>

<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
  <div class="offcanvas-header">
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body d-flex flex-column justify-content-center align-items-center">
    <nav>
      <ul>
        <li>
          <a href="#contacts">Contacts</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<section class="contact-widget spad" id="contacts">lala </section>`

<!-- Bootstrap 5 + icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/dist/js/bootstrap.bundle.min.js"></script>

javascript spring-boot bootstrap-5

Answer 1

Answer №1

Here's a clever solution:

The issue arises when the hide.bs.offcanvas event triggers, causing the scrolling to jump back to the navigation prematurely. To address this, you can insert a snippet of code that maintains the current scroll position.

Your JavaScript code should look like this:

    let myOffcanvas = document.getElementById('offcanvasMenu');

    myOffcanvas.addEventListener('hide.bs.offcanvas', function (e) {
        let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        setTimeout((() => {
            document.documentElement.scrollTop = document.body.scrollTop = currentScrollTop;
        }), 310);
    });

Essentially, the script captures the scroll location before the page jumps back to the top and then smoothly transitions back to it after a delay of 310 ms. The ideal time delay may vary. In this example, 300 works well. Increasing this number will also work, but may result in noticeable bouncing from the top to the current position. Conversely, a lower number may not be as effective.

Below is a functioning demo:

    let myOffcanvas = document.getElementById('offcanvasMenu');

    myOffcanvas.addEventListener('hide.bs.offcanvas', function (e) {
        let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        setTimeout((() => {
            document.documentElement.scrollTop = document.body.scrollTop = currentScrollTop;
        }), 310);
    });

<a class="bi bi-list offcanvas-icon" data-bs-toggle="offcanvas" href="#offcanvasMenu" role="button" aria-controls="offcanvasMenu"></a>


<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
  <div class="offcanvas-header">
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body d-flex flex-column justify-content-center align-items-center">
    <nav>
      <ul>
        <li>
          <a href="#contacts">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<br>
<br>
... // Additional content
<br>

<section class="contact-widget spad" id="contacts">Contact Section</section>

<!-- Bootstrap 5 + icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

Note: I purposely inserted multiple <br> tags for visualization purposes.

Answer 2

Here's a clever solution:

The issue arises when the hide.bs.offcanvas event triggers, causing the scrolling to jump back to the navigation prematurely. To address this, you can insert a snippet of code that maintains the current scroll position.

Your JavaScript code should look like this:

    let myOffcanvas = document.getElementById('offcanvasMenu');

    myOffcanvas.addEventListener('hide.bs.offcanvas', function (e) {
        let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        setTimeout((() => {
            document.documentElement.scrollTop = document.body.scrollTop = currentScrollTop;
        }), 310);
    });

Essentially, the script captures the scroll location before the page jumps back to the top and then smoothly transitions back to it after a delay of 310 ms. The ideal time delay may vary. In this example, 300 works well. Increasing this number will also work, but may result in noticeable bouncing from the top to the current position. Conversely, a lower number may not be as effective.

Below is a functioning demo:

    let myOffcanvas = document.getElementById('offcanvasMenu');

    myOffcanvas.addEventListener('hide.bs.offcanvas', function (e) {
        let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        setTimeout((() => {
            document.documentElement.scrollTop = document.body.scrollTop = currentScrollTop;
        }), 310);
    });

<a class="bi bi-list offcanvas-icon" data-bs-toggle="offcanvas" href="#offcanvasMenu" role="button" aria-controls="offcanvasMenu"></a>


<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
  <div class="offcanvas-header">
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body d-flex flex-column justify-content-center align-items-center">
    <nav>
      <ul>
        <li>
          <a href="#contacts">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<br>
<br>
... // Additional content
<br>

<section class="contact-widget spad" id="contacts">Contact Section</section>

<!-- Bootstrap 5 + icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

Note: I purposely inserted multiple <br> tags for visualization purposes.

When closing the menu in Bootstrap, the page automatically scrolls back to the top

Answer №1

Similar questions

Embed Vue applications within the container of the main Vue application

interrupt the node script using async behavior

A unique Javascript feature that switches the text on various buttons

The code for 'infinite scroll' is currently only functional for scrolling at the top

After a period of time, NodeJS abruptly crashes while processing a CSV file

What steps do I need to take to share my Node JS application on my local area network (

Is there a way to imitate a method that initiates an AJAX request?

How should event listeners be unbound and child elements removed in single page applications?

D3.js: Difficulty fitting the chart within my bootstrap div

Dragging and dropping elements using Jquery to various positions on the screen

Need help with decoding XML namespaces?

Tips for implementing a button redirection to a different page using React

Troubleshooting issue: Inability to assign classes to child elements within divs of a designated class

Print out the error message: "ERROR [ExceptionsHandler] Unable to access the property 'log' as it is undefined."

After refreshing the compiler, the .toggleClass() method in React jQuery finally functions properly

Issues with webpage responsiveness, width not adjusting correctly

Why Does Angular's ngIf Always Result in a Negation to True?

Is GetStaticPath in NextJS suitable for generating large amounts of static data?

Enhancing Function Calls for Better Performance in V8

Tips for navigating upwards to a specific element and successfully clicking on it in Selenium