个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 16:42:17 25 4
gpt4 key购买 nike

我试图将我的网页滚动到一个 div，当我点击一个标签时它会变得可见，但它不起作用。

jsfiddle :演示.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 中遗漏了什么？

最佳答案

我已经编辑了你的 CSS 和脚本

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

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

关于javascript - 如何滚动到先前隐藏但在标签单击时可见的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33575084/

25 4 0
文章推荐： python - 类型错误 : 'module' object is not subscriptable after upgrade to django 1. 5.1
文章推荐： javascript - 如何淡出页面然后定向到新页面
文章推荐： html - 任何人都可以向我解释什么(内容 : "\f01a"; ) on css means? 以及如何使用它？
文章推荐： javascript - 为什么 date() 之间的差异是 NaN？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com