Javascript jQuery滚动到容器div的顶部

我正在使用RocketMill的Ian Flynn提供的优秀手风琴菜单：

这在过去对我来说效果很好，但我有一个新的客户端，它倾向于冗长。当用户尝试单击下一个所需的手风琴链接时，这会出现问题。手风琴可以正常工作，但页面上的内容数量过于夸张，这显然是一个可用性问题

我想做的是协调活动（刚刚单击）“menuTitle”div的顶部与其父级“content”div的顶部

标题1&hellip
副标题1
内容

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

---

哦…我做了一个小插曲。我的第一个：

我使用下面所示的功能，它在大多数情况下都非常有效。只需确保容器/包装器可滚动（使用

overflow-y:auto

）。看

函数scrollIntoView（oElement、sContainer、fnCallback）{
var oContainer、nConContainerTop、nConContainerBottom、nElemHeight、nElemTop、nElemBottom；
如果（！oElement | | oElement.length=$（sContainer.height（））{
动画（{scrollTop:nElemTop}，{duration:“fast”，complete:fnCallback}）；
}
否则如果（Nelembettom>nContainerBottom）{
动画（{scrollTop:（nElemBottom-$（scocontainer.height（））}，{duration:“fast”，complete:fnCallback}）；
}
else if（fn回调）{
fnCallback（）；
}
}

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

更新：

由于被调用的元素被封装在一个名为

'#focusWide'

的div中，因此您不必滚动到

html，body

，您必须滚动到wrapper div

'#focusWide'

上，并使用

位置（）.top

istead of

offset（）.top

。我添加了更多的

'11px'

（wraper div填充的一半）

---

您是否尝试调用

$（this）.slideUp（'normal'）在单击的元素上？我看不出你的结果和我的有什么不同。我在Chrome、Safari和FF的最新版本中试用了它。关键是它们必须协调一致，以便用户可以在父div的顶部看到所需div（手风琴折叠）的第一行。区别在于-mine在单击后隐藏菜单项文本。要将slideDown元素放置在menuTitle所在的位置，您应该能够通过相同的填充顶部来偏移边距顶部，这会将文本定位在menuTitle所在的位置。感谢您的洞察力，J.，我担心我们可能会有误解。对不起，如果我不清楚的话。我的答案是更新的。Mhu，这对我来说是音乐！非常感谢你。今晚我将以一种完全不同的精神喝完那瓶威士忌，明天我将愉快地实现这一目标。好的。我想我们已经在路上了，但还不太清楚。当我将其添加到我的站点代码中时，它的性能与JSFIDLE中的不同。如果我用与我的站点相同的div将html包装在Mhu的fiddle中，那么fiddle就会崩溃。下面是一个新示例：LGVentura的代码中也发生了同样的事情。你的想法是什么？你总是需要确保容器是可滚动的（有一个滚动条）。例如，对于固定高度：这也有效，LGVentura，非常感谢。Mhu是第一个在电线下，但我会比较和对比，同时实施。这不工作，当我把它传输到我的网站。请参阅对Mhu答案的评论。更正我最后的评论。当我将LGVentura的javascript发布到小提琴中时，它确实可以与手风琴周围的额外div一起工作；但是，当我添加CSS时，它会中断。这里有一个JSFIDLE，附加了CSS：您好，我知道您需要什么。我更新了我的答案，请阅读我的解释。在现场实施并工作！非常感谢你，路易斯。我赞成这个答案。在夏季晚些时候发布之后，我还将在这里发布完成的站点。感谢所有在这方面给予帮助的人。
<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" -->

function scrollIntoView(oElement, sContainer, fnCallback) {
    var oContainer, nContainerTop, nContainerBottom, nElemHeight, nElemTop, nElemBottom;

    if (!oElement || oElement.length <= 0) {
        return;
    }

    oContainer = (typeof sContainer == "object" ? sContainer : $(sContainer));
    nContainerTop = oContainer.scrollTop();
    nContainerBottom = nContainerTop + oContainer.height();
    nElemHeight = oElement.height() || 25;
    nElemTop = oElement[0].offsetTop - 50;
    nElemBottom = nElemTop + nElemHeight + 100;
    if ((nElemTop < nContainerTop) || (nElemHeight >= $(sContainer).height())) {
        oContainer.animate({ scrollTop: nElemTop }, { duration: "fast", complete: fnCallback });
    }
    else if (nElemBottom > nContainerBottom) {
        oContainer.animate({ scrollTop: (nElemBottom - $(sContainer).height()) }, { duration: "fast", complete: fnCallback });
    }
    else if (fnCallback) {
        fnCallback();
    }
}

$(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').animate({scrollTop:$(this).prev().position().top + 11 + 'px'}, {queue: false,duration:250, easing: 'swing'});