Problème de défilement accordéon de l'interface utilisateur jQuery

Question

J'ai une page avec plusieurs sections de longueur significativement différente dans un accordéon d'interface utilisateur jQuery. Si j'ouvre une nouvelle section (qui effondre l'une des plus longues sections ci-dessus), je suis laissé au bas de la page. Étant donné que les sections ont des hauteurs significativement différentes, je ne peux pas utiliser la fonction autoheight sans que cela ait l'air très étrange. Est-il possible d'utiliser quelque chose comme scrollto pour aller automatiquement en haut de la section que je viens de développer?

Answer 1

Vous pouvez lier une fonction à l'événement accordionchange et utiliser 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> 

J'ai testé cela dans FF8.

Liens

• Accordion change event
• jQuery scrollTop()