0

I have a webpage with a long list of items (Bootstrap "cards," to be precise). Using Bootstrap 5, I have added an offcanvas sidebar with html bookmark links to help users jump to the desired point on the page. The code is like this (I have truncated it for the sake of simplicity):

<body>
<div class="offcanvas offcanvas-start" id="list">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title text-primary">List View</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-group">
          <li class="list-group-item"><a href="#itemOne">Item One</a></li>
          <li class="list-group-item"><a href="#itemTwo">Item Two</a></li>
          <li class="list-group-item"><a href="#itemTwenty">Item Twenty</a></li>
    </ul>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Landmark List</h3>
  <p>Click button to see list view</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#list">
    View List
  </button>
  <p id="itemOne">Item One</p>
  <p id="itemTwo">Item Two</p>
  ....
  <p id="itemTwenty">Item Twenty</p>
</div>

</body>
</html>

The problem is this: While the bookmark link works and the main page will move to the requested element, when the sidebar is closed, the main page scrolls back to the top of the page. Is there a way to prevent this? Is there something in my existing code that is causing the problem? BTW: this only occurs on large screen devices; on mobile devices it works as hoped.

Hyoryusha
  • 175
  • 1
  • 11

1 Answers1

0

Bootstrap Offcanvas navigation - don't reset background on close

Seems to be because the offcanvas close event wants to scroll back to the element that triggered the open.

Graham Reynolds
  • 146
  • 10