Bootstrap 折叠 scrollTop 滚动到错误的元素

Question

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

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

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

Bootply

（使用移动预览 -> 单击按钮打开可折叠导航 -> 单击“链接 1” -> 滚动到底部并单击按钮以打开第二个折叠导航）

如您所见，它会滚动到“链接 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。