Question

我试图将我的网页滚动到一个div，一旦我点击一个标签就可以看到它，它不起作用。

jsfiddle ： Demo.html http://jsfiddle.net/sathish_panduga/8w8gughf/

我按照教程动画HTML，Body，但它并没有以某种方式工作。下面是脚本和演示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>

我在上面的jquery中缺少什么？

Answer 1

我已编辑过你的CSS和脚本

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

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

如何滚动到之前隐藏但在标签点击时可见的div

1 个答案: