Question

我有一个代表日历的表，可以展开和折叠表行。

  <tr class="parent" id="month1">
    <th class="subheader">Januari</th>
    <th></th><th></th>
  </tr>
  <tr class="row child-month1" id="day-1">
    <td class="date"> 1 januari 2010</td>
    <td>Bedrag </td>
    <td>-817.0 </td>
  </tr>
  <tr class="row child-month1" id="day-2">
    <td class="date"> 2 januari 2010</td>
    <td>Bedrag </td>
    <td> 0 </td>
  </tr>

使用jQuery我可以点击它：

<script type="text/javascript">
$(document).ready(function() {    
  $('tr.parent').click(function(){
    $(this).siblings('.child-' + this.id).toggle();
    return false;
  });
});
</script>

现在的问题是，在单击表格行之后，窗口始终会滚动到顶部。我希望它保持在点击之前的滚动位置。

子行按预期折叠，但文档在点击后立即滚动到顶部，即使我在.click结束时返回false ... 我做错了什么？

Answer 1

即使您没有在点击处理程序中返回false，也不应该滚动页面以响应点击。

是否页面足够短，以至于当某些行崩溃时，页面变得足够短以至于它们都适合视口？（当然，浏览器会向上滚动以填充视口。）

更新如果是这种情况，您可以考虑在通话期间尝试保留scrollTop：

$(document).ready(function() {    
  $('tr.parent').click(function(){
    var scrollTop = document.body.scrollTop;        // <== Save the current value
    // *** Maybe append something to the page here to keep it tall***
    $(this).siblings('.child-' + this.id).toggle();
    // *** Maybe remove the appended thing now ***
    document.body.scrollTop = scrollTop;            // <== Restore it
    return false;
  });
});

如果所有这些都在body以外的容器中，您可能需要尝试将其保存在该容器中，但您明白了。这可能不完美，具体取决于页面高度的变化程度，但可能有所帮助。

Answer 2

好的，所以我尝试了TJ的建议来解决这个问题。

我将var scrollTop = document.body.scrollTop更改为var scrollTop = window.pageYOffset，因为不知怎的document.body.scrollTop总是返回0（不知道为什么）。 pageYOffset为我返回正确的滚动位置。顺便说一句，我在Firefox中完成了所有这些工作。

我最终得到了这段代码：

  <div id="bottomspacer" style="height: 1000px; display: none; "></div>
  <script type="text/javascript">
  $('tr.parent').click(function(){
    $('#bottomspacer').show();
    var scrollTop = window.pageYOffset;
    $(this).siblings('.child-' + this.id).toggle();
    document.body.scrollTop = scrollTop;
    $('#bottomspacer').hide();
    return false;
  });
  </script>

jQuery可点击行

2 个答案: