阻止Div滚动到视图之外

Question

我想知道是否可以阻止div滚动到视线之外？ http://jsfiddle.net/8uLuN/3/

如果单击第一个链接“关于我们”，则div会展开并显示内容。 但是，当您单击第二个链接“我们如何工作”时，标题栏滚动到视线之外并显示内容的下半部分？ 当您声明：

ac-container input:checked ~ article.ac-small {
height: 1000px;
}
.ac-container input:checked ~ article.ac-medium {
height: 1000px;
}
.ac-container input:checked ~ article.ac-large {
height: 1000px;
}

相反，当内容仅几行或div大约为100-200像素时，就不会出现此问题。

有没有一种方法可以解决此问题，因此无需尝试使用完全不同的方法，就可以看到“我们如何工作”标题栏并且该标题栏是可见的（下面的内容）？

欢呼声

Answer 1

这是一个jQuery答案，但实际上知道它的人可以将其放入javascript。 ：/

$("div").click(function(){
    $('html, body').animate({
            scrollTop: $(this).offset().top
        },500);
});

Answer 2

使用jQuery

$("div").click(function(){
        $("body").scrollTop($(this).offset().top);
});

虽然您可能想给菜单divs一个类，然后通过它来调用它

假设您给了他们一类“ menuDiv ”

$(".menuDiv").click(function(){
        $("body").scrollTop($(this).offset().top);
});

否则，如果您不想使用Jquery

为您的div放置一个onclick并将其添加到函数中

scrollTo(window.pageXOffset,this.offsetTop);