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 手风琴

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 Web 应用程序中，这样页面就不会滚动状态栏后面的手风琴标题顶部。

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

Answer 5

请参考这个< /a> 由 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);
                        }
                    }
                }); 

Answer 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
});  

Answer 7

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

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

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

Answer 8

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

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

The val 返回为空，所以我在这里找到了另一个答案：检查它是否为空并添加/替换了此功能 - 所以它现在可以工作了。

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

Answer 9

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

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

希望它对某人有用。

Answer 10

上使用此函数即可

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



    });

    });

只需在 window.load Perfectl wokring

Answer 11

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

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