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

时间:2010-09-01 18:46:27

标签: jquery accordion

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

当:

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

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

11 个答案:

答案 0 :(得分:22)

它适用于我并经过测试,

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

答案 1 :(得分:20)

您可以尝试使用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.oldHeaderui.oldPanel将是空的jQuery对象。如果手风琴折叠,ui.newHeaderui.newPanel将是空的jQuery对象。

参考文献:jQuery UI Accordion

答案 2 :(得分:11)

因为我想要崩溃是真的,我添加了一个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);
      }
    });
  });

答案 3 :(得分:8)

我知道这个问题已经过时了,但上述情况都不符合我的要求。这就是我完成它的方式。 -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);
});

答案 4 :(得分:3)

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

答案 5 :(得分:1)

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

答案 6 :(得分:1)

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

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

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

答案 7 :(得分:0)

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

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

希望它对某人有用。

答案 8 :(得分:0)

我实现了第一个答案并且最喜欢这个选项,因为它是所有手风琴面板的一个功能。但是,我注意到我在尝试(重新)关闭同一个手风琴面板时仍然遇到错误 - 它会在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 :(得分:0)

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



    });

    });

完美的工作

答案 10 :(得分:0)

没有必要使用scrollTo插件,你可以这样做:

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