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左右的像素时，不会出现问题。

有没有办法克服这个问题，所以“我们如何工作”标题栏进入视图并且可见（使用下面的内容）而不必尝试完全不同的方法？

干杯 Volterony

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);

阻止Div滚出视图

2 个答案: