Javascript 如何滚动到先前隐藏但在标签单击时可见的div_Javascript_Jquery_Html_Css

Javascript 如何滚动到先前隐藏但在标签单击时可见的div

javascript jquery html css

Javascript 如何滚动到先前隐藏但在标签单击时可见的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图将我的网页滚动到一个div，一旦我点击一个标签，这个div就会显示出来，但它不起作用 jsfiddle： Demo.html 我按照一个教程来制作HTML动画，但不知怎么的，它不起作用。下面是脚本和演示html <script src="http://localhost/app/static/jquery-1.10.2.min.js"></script> <style type="text/css"> .addDiv{ font-si

我试图将我的网页滚动到一个div，一旦我点击一个标签，这个div就会显示出来，但它不起作用

jsfiddle： Demo.html

我按照一个教程来制作HTML动画，但不知怎么的，它不起作用。下面是脚本和演示html

<script src="http://localhost/app/static/jquery-1.10.2.min.js"></script>

<style type="text/css">
    .addDiv{
    font-size: 20px;
    display:block;
    margin-top:40%;
    border:solid;
    width:16%;
    border-color:#808080;
        }
.addDiv + input{
  display:none;
}
.addDiv + input + *{
 display:none;
 }
.addDiv+ input:checked + *{
 display:block;
}
.inner {
    border: 1px solid green;
    width: 100%;
    height: 600px;
}
.inner1 {
    position:relative;
    width:50%;
    height:500px;
    float:left;
    background:#808080;
    background-color:#808080;
    overflow:hidden;
}
.inner2 {
    position:relative;
    width:50%;
    height:500px;
    float:left;
    background:green;
    background-color:green;
    overflow:hidden;
}
</style>
<body>
    <script type="text/javascript">
        $("#button").click(function () {
        $('html, body').animate({
            scrollTop: $("#moredetails1").offset().top
        }, 2000);
    });
</script>

<label class="addDiv" for="_1" id="button">Add more details?</label>
<input id="_1" type="checkbox">

<div class="inner" style="margin-top:20px;" id="moredetails1">
    <div class="inner1">
        <section>
            Enter Name:<input type="text" /><br /><br />
        </section>
    </div>
    <div class="inner2">
        <section>
            Enter Name:<input type="text" /><br /><br />
        </section>
    </div>
</div>


addDiv先生{
字体大小：20px；
显示：块；
利润率最高：40%；
边框：实心；
宽度：16%；
边框颜色：#808080；
}
.addDiv+输入{
显示：无；
}
.addDiv+输入+*{
显示：无；
}
.addDiv+输入：选中+*{
显示：块；
}
.内部{
边框：1px纯绿色；
宽度：100%；
高度：600px；
}
.1{
位置：相对位置；
宽度：50%；
高度：500px；
浮动：左；
背景#8080；
背景色：#808080；
溢出：隐藏；
}
.2{
位置：相对位置；
宽度：50%；
高度：500px；
浮动：左；
背景：绿色；
背景颜色：绿色；
溢出：隐藏；
}
$（“#按钮”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#moredetails1”）.offset（）.top
}, 2000);
});
添加更多细节？
输入名称：


输入名称：

我在上面的jquery中遗漏了什么？

我已经编辑了yout css和脚本

jsfiddle : https://jsfiddle.net/ArtyukhAlex/63wy2g0r/1/

要使脚本捕获div的顶部偏移量，您需要在动画函数执行时使其可见，因此最好的解决方案是使用脚本而不是css来显示和隐藏它。

将脚本放在HTML标记中的元素下方或使用document ready event Hi Wolff，我尝试将脚本放在document ready event上。。它仍然不起作用：(