Bootstrap，关闭菜单后菜单滚动回顶部

Question

当我打开菜单并单击链接时，我会滚动到菜单的下一页，但是当我关闭菜单时，我会返回到页面顶部。

我尝试过的脚本：

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

和

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

但这些脚本对我没有帮助。

代码片段

<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">Контакти</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/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Answer 1

这里有一个解决方法：

问题是，在

hide.bs.offcanvas

上，滚动（转到导航）已经开始。所以你可以在那里放置一个代码以保持在该滚动位置。

你的JS代码应该是这样的：

    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);
    });

首先，您在滚动回原点（导航）之前（同时）获取当前位置。然后在

310

毫秒后，立即返回当前位置。

310

毫秒可能会有所不同。在我的代码中，

300

工作正常。更高的数字也可以工作，但您会注意到页面从原点弹跳到当前位置。较低的数字可能会失败。

这是一个工作示例：

    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">Контакти</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<br>
<br>
<br>
<br>
<br>A
<br>
<br>
<br>
<br>
<br>B
<br>
<br>
<br>
<br>
<br>C
<br>
<br>
<br>
<br>
<br>D
<br>
<br>
<br>
<br>
<br>E
<br>
<br>
<br>
<br>
<br>F
<br>
<br>
<br>
<br>
<br>G
<br>
<br>
<br>
<br>
<br>H
<br>
<br>
<br>
<br>
<br>

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

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

请注意，我添加了许多

<br>

，以便您可以看到它是如何工作的。