Question

我正在使用此脚本滚动到显示的折叠元素：

$('.collapse').on('shown.bs.collapse', function () {
  $('html, body').stop().animate({
    scrollTop: $(this).offset().top
  }, 500, 'swing');
});

除了我在非常小的屏幕尺寸上导航外，它完美适用于所有内容。在打开菜单时，我希望它滚动到导航的顶部。这适用于我的顶级导航，但对于我的第二级导航，它会滚动到该部分的顶部而不是导航。

Bootply

（使用移动预览 - ＆gt;点击按钮打开可折叠导航 - ＆gt;点击'链接1' - ＆gt;滚动到底部，然后点击按钮打开第二个折叠导航栏

正如您将看到它滚动到“链接1”标题而不是刚刚打开的导航。

Answer 1

这个问题没有得到答复，这让我有些烦恼，所以我差不多3年后再看看它。我发现父母和第二个导航都在第二个'显示'事件中开火。

然后我找到了这个similar question，accepted answer持有了密钥。

就像使用event对象的stopPropagation方法一样简单，以防止父崩溃元素被通知事件。

$('.collapse').on('shown.bs.collapse', function (event) {
    event.stopPropagation();
    $('html, body').stop().animate({
        'scrollTop': $(this).offset().top
    }, 500, 'swing');
});

更新了bootply。

Bootstrap collapse scrollTop滚动到错误的元素

1 个答案: