如何使用Bookstap OffCanvas侧边栏与书签

发布于 2025-01-18 14:10:14 字数 1449 浏览 3 评论 0原文

我有一个网页，其中包含一长串项目（准确地说是引导“卡片”）。使用 Bootstrap 5，我添加了一个带有 html 书签链接的 offcanvas 侧边栏，以帮助用户跳转到页面上所需的位置。代码是这样的（为了简单起见，我将其截断）：

<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>

问题是这样的： 当书签链接起作用并且主页将移动到请求的元素时，当侧边栏关闭时，主页将滚动回页面顶部。有办法防止这种情况吗？我现有的代码中是否有某些内容导致了问题？顺便说一句：这只发生在大屏幕设备上；在移动设备上，它按预期工作。

原文

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.

分享到QQ

分享到微博