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

使用jQuery accordion控件，当它离开屏幕时，如何让它滚动到我选择的项目

当：

• 我有一个手风琴项目，其内容大于可视窗口
• 我向下滚动到第二个手风琴项目
• 我单击第二个手风琴项目以显示它
• 第一个手风琴选项折叠，第二个打开，但滑出屏幕

手风琴是否有滚动到第二项的选项？

您可以尝试使用。它允许您执行以下操作：

$.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

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

将

ScrollTo（）

绑定到

accordioActivate

事件，如下所示：

$.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

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

accordioActivate

事件何时触发

激活面板后触发（动画完成后）。如果手风琴先前已折叠，

ui.oldHeader

和

ui.oldPanel

将是空的jQuery对象。如果手风琴正在折叠，

ui.newHeader

和

ui.newPanel

将是空的jQuery对象

---

参考资料：

他们也有同样的问题。以下是对我有效的方法，至少是最简单的方法。 使用scrollTo插件

<script type="text/javascript">
    $(function(){
        $('#youraccordionheader').click(function(){
            $.scrollTo(this)                                                 
        })
    });
</script>

$（函数（）{
$（'#youraccordionheader'）。单击（函数（）{
$.scrollTo（此）
})
});

---

希望它对某些人有用。

我实现了第一个答案，最喜欢这个选项，因为它是所有手风琴面板的一个功能。但是，我注意到，在尝试（重新）关闭同一个手风琴面板时，我不断收到一个错误-它会在ScrollTo插件的这一行停止脚本：

attr[key] = val.slice && val.slice(-1) == '%' ? 

val返回为空，因此我在这里找到了另一个答案，即检查val是否为空，并添加/替换了此函数-因此它现在可以工作

else{
var val = targ[pos];
// Handle percentage values
if(val) {
    attr[key] = val.slice && val.slice(-1) == '%' ?
    parseFloat(val) / 100 * max
    : val;
    }
}

---

当您使用手风琴单击关闭功能时，我在绑定事件时遇到问题。仅仅添加一个if语句就解决了这个问题

$('#accordion').bind('accordionchange', function(event, ui) {
    if(!ui.newHeader.length) { return; }
  /* In here, ui.newHeader = the newly active header as a jQ object
              ui.newContent = the newly active content area */
  $.scrollTo( ui.newHeader ); // or ui.newContent, if you prefer
});  

---

我知道这个问题由来已久，但上述问题对我来说都不起作用。我就是这样做到的。50只是为了防止它出现在iPad或iPhone网络应用程序中，这样页面就不会滚动到状态栏后面手风琴标题的顶部

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

---

因为我希望collapse为true，所以我添加了一个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);
      }
    });
  });

---

只需在window.load上使用此函数即可

$(function() {
    var icons = {
    header: "ui-icon-circle-plus",
    activeHeader: "ui-icon-circle-minus"
    };
    $( "#accordion" ).accordion({
    icons: icons, autoHeight: false, collapsible: true, active: false,
    activate: function(event, ui){
        var scrollTop = $(".accordion").scrollTop();
        var top = $(ui.newHeader).offset().top;
     //do magic to scroll the user to the correct location

     //works in IE, firefox chrome and safari
        $("html,body").animate({ scrollTop: scrollTop + top -35 }, "fast");
       },



    });

    });

---

perfectl wokring

马丁提供的解决方案非常有效。但是，当您添加此代码时，无论您的手风琴在页面上是否可见，它都将始终滚动到顶部

如果仅当手风琴内容大于可查看窗口时才想滚动到顶部，请使用下一代码：

$(document).ready(function() {

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

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

$（文档）.ready（函数（）{
函数IsCrolledinToView（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
$（“.accordion-inner”）.bind（“accordionchange”，函数（事件，用户界面）{
if（$（ui.newHeader）.offset（）！=null）{
如果（！IsCrolledinToView（ui.newHeader））
{
ui.newHeader，//$object，激活的头
$（“html，body”）.animate（{scrollTop:（$（ui.newHeader）.offset（）.top）-100}，500）；
}
}
});
});

它适合我，经过测试

$( "#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');
        }
    }
});

请参考

它是为我工作与上述修改

$("#accordion").accordion({
                    heightStyle: "content",
                    collapsible: true,
                    activate: function (event, ui) {

                        try
                        {
                            var self = this;
                            theOffset = $(self).offset();
                            $('body,html').animate({ scrollTop: theOffset.top - 100 });
                        } catch (e) {
                            alert(e);
                        }
                    }
                }); 

---

无需滚动到插件，您可以执行以下操作：

$('.accordionNormalitzador').bind('accordionactivate', function(event, ui) {
        $( ui.newHeader )[0].scrollIntoView(); 
    });

---

谢谢这是上述所有代码中唯一有效的代码。在较新版本中，使用以下语法进行绑定：

$（.ui accordion”）。在（“激活”，函数（事件，用户界面）{

@Martin这行的意义是什么

ui.newHeader，

？我不确定它是必需的。是的，这也行。非常感谢！+1的

autoHeight

属性。你的回答帮助一举两得：）这正是我基于iPad popover的帮助页面所需要的。非常感谢！如果可以的话，我会投票给你x100！它是哪一个插件？你的链接哪里都没有。@Toydor，在我写这个答案后的几年里，jQuery插件“存储库”已经完全重组（如果我记得的话，在崩溃后）。我更新了链接，指向我认为是当前版本的插件。仅供参考，jQuery UI Accordion widgets的API已更改。要使用的新事件是

accordionactivate

：没有scrollto jQuery插件：

document.getElementById（content.scrollIntoView（））

在

accordioActivate

事件回调工作区内这是完美的。我使用“可折叠：true”和“活动：false”。这应该是选择的答案。不是选择的答案。顶部的答案不适用于“可折叠：true”.很好的工作，措辞很好的问题，一个很好的复制粘贴答案。谢谢！这是一个很好的解决方案，唯一对我有效的方法！谢谢！