I have a simple bootstrap 5 offcanvas element. This contains a simple link to an anchor in the body of the html page.
I configured the offcanvas to have no backdrop and enables body scrolling.
Now when I open the offcanvas en click the link. The body scrolls to that section of the page. But when I close the offcanvas. The body scrolls back to the top. How can I keep the body where it is?
It seems like that the button that is used to open the offcanvas gets the focus back. I tried something like this.
var myOffcanvas = document.getElementById('offcanvasExample');
//var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
myOffcanvas.addEventListener('hidden.bs.offcanvas', function (event) {
//event.stopPropagation();
//event.preventDefault();
// Give the document focus
// Remove focus from any focused element
if (document.activeElement) {
document.activeElement.blur();
}
window.focus();
});
but the page keeps scrolling back to the button.
Kind regards
It is solved. The button should not use data-bs-toggle="offcanvas". If you make a on click handler for the button that toggles the offcanvas with the javascript functions of bootstrap it all works.
Here is my code
document.addEventListener("DOMContentLoaded", function(){
var myOffcanvas = document.getElementById('offcanvasExample');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
document.getElementById("OpenMenu").addEventListener('click',function (e){
e.preventDefault();
e.stopPropagation();
bsOffcanvas.toggle();
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- the Offcanvas button //-->
<button class="nav-link btn btn-outline-primary" id="OpenMenu">open</button>
<!-- the Offcanvas element //-->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title text-primary" id="offcanvasExampleLabel">Test</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<a href="#test">test</a>
</div>
</div>
<div class="my-5 py-5">
Test content
</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5"><a name="test" id="test">Scroll here</a></div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>