jQuery Accordion - 它会滚动到打开项目的顶部吗？

Question

使用jQuery手风琴控件,如何让它滚动到我离开屏幕时选择的项目？

什么时候:

• 我的手风琴项目的内容大于可视窗口
• 我向下滚动到第二个手风琴项目
• 我点击第二个手风琴项目来显示它
• 第一个手风琴选项折叠,第二个手风琴选项打开,但滑出屏幕.

手风琴是否可以选择滚动到第二个项目？

Answer 1

它适用于我并经过测试,

$( "#accordion" ).accordion({
    heightStyle: "content",
    collapsible: true,
    active: false,
    activate: function( event, ui ) {
        if(!$.isEmptyObject(ui.newHeader.offset())) {
            $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
        }
    }
});

http://jsfiddle.net/ilyasnone/aqw613em/

Answer 2

您可以尝试使用scrollTo jQuery插件.它可以让你做这样的事情:

$.scrollTo('div#foo'); // scroll the browser window so div#foo is in view
$('div#foo').('#bar'); // scroll within div#foo so #bar is in view

绑定ScrollTo()到accordionactivate事件,像这样:

$('#youraccordion').bind('accordionactivate', function(event, ui) {
  /* In here, ui.newHeader = the newly active header as a jQ object
              ui.newContent = the newly active content area */
  $( ui.newHeader ).ScrollTo(); // or ui.newContent, if you prefer
});

accordionactivate事件何时触发？

激活面板后触发(动画完成后).如果手风琴以前倒塌,ui.oldHeader并ui.oldPanel为空的jQuery对象.如果手风琴正在崩溃,ui.newHeader而ui.newPanel将是空的jQuery对象.

参考文献:jQuery UI Accordion

Answer 3

因为我想要崩溃是真的,我添加了一个if测试来取消所有被折叠项目的错误.我也不希望标题完全位于页面顶部,所以我将scrollTop位置降低了100:

  $(document).ready(function() {
    $(".ui-accordion").bind("accordionchange", function(event, ui) {
      if ($(ui.newHeader).offset() != null) {
        ui.newHeader, // $ object, activated header
        $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500);
      }
    });
  });

Answer 4

我知道这个问题已经过时了,但上述情况都不符合我的要求.这就是我完成它的方式.-50只是为了防止它出现在iPad或iPhone webapp中,这样页面就不会滚动状态栏后面的手风琴标题的顶部.

$('#accordion').accordion({
  collapsible: true,
  autoHeight: false,
  animated: false
});
$('.ui-accordion-header').bind('click',function(){
    theOffset = $(this).offset();
    $(window).scrollTop(theOffset.top - 50);
});