从 JS/Jquery 滚动回 DIV 的位置答案

【问题标题】：Scroll back to a DIV's position from JS/Jquery从 JS/Jquery 滚动回 DIV 的位置
【发布时间】：2013-10-17 15:20:56
【问题描述】：

我有一系列可展开的内容 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();
    }
}

【问题讨论】：

由于id是uniq，所以不用在选择器前面放标签名..$("#post div.heading")
使用此代码滚动到 div 可以正常工作（当然，在单击 .header 之后，不是您所说的 .body，这是因为执行错误。请看下面的答案）。
如果您使用的是 jQM，请使用$.mobile.silentScrol()。

标签： javascript jquery html jquery-mobile

【解决方案1】：

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

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

那么您的 gotoHead() 函数可能如下所示

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

【讨论】：

【解决方案2】：

根据您的描述，您编写脚本的方式存在一些问题。一是.body div 没有点击事件。第二个是您将 javascript 点击事件直接编码到 HTML 中。通常，除非必须这样做，否则最好在 JavaScript 中声明事件，这通常更容易返回并编辑新功能。

这是你所做的更新：

$('.heading').click(function(e){
    // hide or show the corresponding .body div
    $(this).parent().children('div.body').toggle();
});

$('.body').click(function(e){
    // scroll to the corresponding .heading div
    $('html,body').animate({
        scrollTop: $(this).parent().children('div.heading').offset().top
    }); 
});

您还可以在此处查看此操作： http://jsfiddle.net/joncox/pmeEs/

【讨论】：