javascript - 从 JS/Jquery 滚动回 DIV 的位置

Question

我有一系列可展开的内容 DIV，这些 DIV 最初是折叠的，并在单击另一个带有标题文本的 DIV 时展开。请参阅下面的代码示例。

<div id="post">
   <div class="heading" onclick="opendiv()">...Heading...</div>
   <div class="body">.....Lengthy content.....</div>
</div>
....
....

“body”类最初隐藏具有“冗长内容”的“body”DIV。单击“标题”DIV 时，“正文”DIV 会展开，使网页可滚动。请记住，该组上方和下方有 5 个或更多此类可扩展 DIV 集。单击“正文”部分时，页面必须滚动回其“标题”DIV 位置。

这是我用来展开和折叠 DIV 上方的 js 脚本。但是滚动回给定的 DIV 不起作用。

function opendiv() {
    $('html,body').animate({scrollTop: $("div#post div.heading").offset().top});

    if ($("div#post div.body").css("display") == "block") {
        $("div#post div.body").hide();
     } else {
        $("div#post div.body").show();
    }
}

Answer 1

您没有向 .body div 添加任何事件监听器

<div class="body" onclick="gotoHead()">.....Lengthy content.....</div>

那么你的gotoHead()函数可能看起来像这样

function gotoHead() {
    document.body.scrollTop = $('#post .heading').offset().top;
}