javascript - jQuery scrollTop 到容器 div 的顶部

Question

我正在使用 RocketMill 的 Ian Flynn 提供的优秀 Accordion 菜单:http://www.rocketmill.co.uk/create-accordian-boxes-with-a-rotating-arrow-using-css-jquery

这在过去对我来说效果很好，但我有一个新客户端倾向于详细。当用户尝试单击下一个所需的 Accordion 链接时，这会出现问题。 Accordion 工作正常，但是双曲线数量的内容从页面中弹出，呈现出明显的可用性问题。

我想要做的是将事件的(刚刚单击的)“menuTitle”div 的顶部与其父级“content”div 的顶部保持一致。

<div id="content">
    <div class="menuTitle">
        <strong>Title 1&hellip;</strong>
    </div>
    <div class="menuContent"> <!-- Sliding content box -->
        <h5>Sub-title 1</h5>
        <p>Content</p>
    </div> <!-- End of div class="menuContent" -->
<!-- THE ABOVE SEVEN LINES REPEAT FOR EACH FOLD OF THE ACCORDION -->
</div> <!-- End of div id="content" -->

我已经为此工作了大约三天，并查阅了很多很多网站、jQuery 指南和威士忌。我不是 jQuery 专家。请帮忙!

哦...我做了一个jsFiddle。我的第一个:http://jsfiddle.net/Parapluie/CRXX8/

Answer 1

好吧，如果我明白你想要什么..

http://jsfiddle.net/CRXX8/4/

$(document).ready(function() {
    $('#content .menuTitle').on('click',function() {
        $('#content .menuTitle').removeClass('on'); // "closes" the closing menu arrow
        $('#content .menuContent').slideUp('normal'); // slide-closes the closing div
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on'); // "opens" the opening menu arrow
            $(this).next().slideDown('normal',function(){
                $('html,body').animate({scrollTop:$(this).prev().offset().top}, {queue: false,duration:250, easing: 'swing'}); // on complete slidedown, scroll the clicked .menuTitle to top of page
            });// slide-opens the opening div
        }
    }); // end of click event
}); // end of ready

更新:

由于您调用的元素被包装在一个名为 '#focusWide' 的 div 中，因此您不必滚动Top html,body，您必须滚动Top 包装器 div '#focusWide' 并使用 position().top 而不是 offset().top。我添加了更多 '11px' (包装器 div 填充的一半)。

$('#focusWide').animate({scrollTop:$(this).prev().position().top + 11 + 'px'}, {queue: false,duration:250, easing: 'swing'});

http://jsfiddle.net/CUu7h/2/