打开 Bootstrap Accordion 后滚动到内容答案

【问题标题】：Scrolling to content after a Bootstrap Accordion is opened打开 Bootstrap Accordion 后滚动到内容
【发布时间】：2014-04-14 15:08:57
【问题描述】：

我有一个 Bootstrap Accordion，里面有很多面板。我面临的问题是，如果面板打开页面，用户不知道面板已打开，他们可以向下滚动到它。

为了解决这个问题，我希望能够滚动到现在打开的内容，这样他们就知道内容是打开的，这样他们就不用滚动到它了。

我在尝试此操作时似乎遇到了问题。

这就是我的函数的样子

$('.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));

但都不对页面做任何事情。它只是坐在那里。任何帮助将不胜感激！

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案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);
});

【讨论】：

【解决方案2】：

滚动页面以在页面顶部显示展开/活动的手风琴

$('#accordion').on('shown.bs.collapse', function(e) {
  var offset = $('.panel.panel-default > .panel-collapse.in').offset().top;
  if (offset > 0) {
    $('html,body').animate({
      scrollTop: $('.panel .active').offset().top - 100
    }, 500);
    // you can chagne 100 value to take distance in pixels from top in page
  }
});

【讨论】：