如何在输入聚焦时向下滚动到div

Posted 2021-05-04

当搜索字段集中时，任何人都可以帮助我使用javascript使页面向下滚动到搜索框吗？就像您单击搜索字段一样，位置会发生变化，直到红色和黄色框不在视线范围内。

#overtop {
width: 500px;
height: 100px;
background: red;
}

#top {
width: 500px;
height: 100px;
background: yellow;
}

#searchbox {

}

#content {
width: 500px;
height: 200px;
background: blue;
}

<div id="overtop">
</div>
<div id="top">
</div>
<div id="searchbox">
<input type="text" id="myInput" placeholder="enter.." title="search">
</div>
<div id="content">
</div>

答案

最后得到了它。

        $("#myInput").click(function () {
    $("html, body").animate({ scrollTop: $("#searchbox").offset().top }, 300);
    return true;
});