打开Bootstrap手风琴后滚动到内容

Question

我有一个Bootstrap手风琴,里面有很多面板.我面临的问题是,如果面板打开页面,用户不知道面板是打开的,他们可以向下滚动到它.

为了解决这个问题,我希望能够滚动到现在打开的内容,这样他们就知道内容是打开的,并且可以防止它们滚动到它.

当我试图尝试这个时,我似乎遇到了问题.

这就是我的功能

$('.accLink').on('click', function(){
  if($(this).parent().next('.panel-collapse').hasClass('in')){

  }else{
   //This is where the scroll would happen
  }
});

到目前为止我试过......

$('html, body').animate({
  scrollTop: ($(this).parent().next('.panel-collapse'))
  },500);

和

$('div').animate({
  scrollTop: ($(this).parent().next('.panel-collapse'))
  },500);

我也试过这样的事......

function scrollToElement(ele) {
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

var element = $(this).parent().next('.panel-collapse').attr('id');
scrollToElement($('#'+element));

但是没有对页面做任何事情.它只是坐在那里.任何帮助,将不胜感激!

Answer 1

使用Bootstrap的内置事件回调,而不是单独的单击事件侦听器:

$("#accordion").on("shown.bs.collapse", function () {
    var myEl = $(this).find('.collapse.in');

    $('html, body').animate({
        scrollTop: $(myEl).offset().top
    }, 500);
});

或者,如果您希望标题显示:

$("#accordion").on("shown.bs.collapse", function () {
    var myEl = $(this).find('.collapse.in').prev('.panel-heading');

    $('html, body').animate({
        scrollTop: $(myEl).offset().top
    }, 500);
});