jQuery UI Accordion Scrolling issue

Question

У меня есть страница с несколькими разделами значительно различающейся длины в рамках пользовательского интерфейса jQuery. Если я открою новый раздел (который разрушает один из более длинных разделов выше), я остаюсь в нижней части страницы. Поскольку разделы имеют значительно разную высоту, я не могу использовать функцию автоматического управления, не выглядя очень странно. Есть ли способ использовать что-то вроде scrollto для автоматического перехода в начало раздела, которое я только что расширил?

Answer 1

Вы можете привязать функцию к accordionchange события и использовать JQuery scrollTop():

JavaScript

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     header: "h3" 
    }); 

    $('#accordion').bind('accordionchange', function (event, ui) { 
     $(window).scrollTop(ui.newHeader.offset().top); 
    }); 
}); 

HTML

<div id="accordion"> 
    <div id="accordion-one"> 
     <h3><a href="#">First</a></h3> 
     <div>Some lengthy text</div> 
    </div> 
    <div id="accordion-two"> 
     <h3><a href="#">Second</a></h3> 
     <div>Less lengthy text</div> 
    </div> 
    <div id="accordion-three"> 
     <h3><a href="#">Third</a></h3> 
     <div>Other text</div> 
    </div> 
</div> 

Я испытал это в FF8.

Ссылки

• Accordion change event
• jQuery scrollTop()