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

Posted 2023-05-08

【中文标题】jQuery Accordion - 它会滚动到打开项目的顶部吗？

【英文标题】：jQuery Accordion - will it scroll to the top of the open item?

【发布时间】：2011-04-06 23:25:29

【问题描述】：

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

时间：

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

有没有让手风琴滚动到第二个项目的选项？

【参考方案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/

【讨论】：

这太完美了。我使用“可折叠：真”和“活动：假”。这应该是选择的答案。不是被选中的那个。顶部的一个不适用于“可折叠：真”。干得好

措辞恰当的问题，以及出色的复制和粘贴答案。谢谢！

这是一个很好的解决方案，唯一真正对我有用的东西！谢谢！

【参考方案2】：

您可以尝试使用scrollTo jQuery plugin。它可以让你做这样的事情：

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

【讨论】：

是哪个插件？您的链接不会去任何地方。

@Toydor，自从我写这个答案以来的几年里，jQuery 插件“存储库”，例如，已经完全重组（如果我记得的话，在崩溃之后）。我更新了链接以指向我认为是插件的当前版本。

仅供参考，jQuery UI Accordion 小部件的 API 已更改。要使用的新事件是accordionactivate：api.jqueryui.com/accordion/#event-activate

如果没有 scrollto jquery 插件：document.getElementById(content).scrollIntoView(); 在 accordionactivate 事件回调中有效

【参考方案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);
      
    );
  );

【讨论】：

谢谢。这是上述所有代码中唯一有效的代码。

在较新的版本中，使用此语法进行绑定：$(".ui-accordion").on("activate", function (event, ui)

@Martin ui.newHeader, 行的意义何在？我不确定它是否需要。

【参考方案4】：

我知道这个问题已经过时了，但以上都不是我想要的。这就是我实现它的方式。 -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);
);

【讨论】：

是的，这也有效。非常感谢！为 autoHeight 属性 +1。您的回答有助于用一块石头杀死两只鸟:)

正是我的 iPad 基于弹出框的帮助页面需要什么。太感谢了！如果可以的话，我会投票给你 x100！

【参考方案5】：

请参考this回复techfoobar

$(function() 
    $("#accordion").accordion(
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300 // collapse will take 300ms
    );
    $('#accordion h3').bind('click',function()
        var self = this;
        setTimeout(function() 
            theOffset = $(self).offset();
            $('body,html').animate( scrollTop: theOffset.top - 100 );
        , 310); // ensure the collapse animation is done
    );
);

以上修改对我有用。

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

【参考方案6】：

当您使用手风琴点击关闭功能时，我遇到了绑定事件的问题。只添加一个 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
);  

【参考方案7】：

Martin 的解决方案效果很好。但是，当您添加此代码时，无论您的手风琴是否在页面上可见，它都会始终滚动到顶部。

如果您只想在您的手风琴内容大于可视窗口时滚动到顶部，则使用下一个代码：

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

【参考方案8】：

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

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

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

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

【参考方案9】：

嘿确实有同样的问题。这对我来说至少是最简单的方法。 使用 scrollTo 插件。

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

希望它可能对某人有用。

【参考方案10】：

只需在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");
       ,



    );

    );

完美的工作

【参考方案11】：

不需要scrollTo插件，你可以这样做：

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