重新渲染列表模板导致页面滚动到顶部

我有一些模板，大致如下所示：

<template name="items">
  <div class="item-list">
    {{#each items}}
      {{> item}}
    {{/each}}
  <div>
  {{> loadMore}}
</template>

<template name="item">
  <div class="item" id="{{unique_string}}">
    <!-- stuff here -->
  </div>
</template>

<template name="loadMore">
  <a href="#">Load more...</a>
</template>

与相关的JavaScript：

Template.items.items = function() {
  return Items.find({}, {limit: Session.get("itemCount")});
}

Template.loadMore.events({
  "click": function() {
    Session.set("itemCount", Session.get("itemCount") + 10);
  }
})

所有这些或多或少地给了我一些几乎像无限滚动部分一样的东西。 （实际的代码还有一些移动部分，但这是重要的一点。）

每当我点击loadMore不过，它都会拉取更多数据and将我滚动回到页面顶部，而不是破坏无限滚动的目的。我可以添加一些 JavaScript 来向下滚动回到它应该在的位置，但是当页面快速跳转时，这会留下令人讨厌的闪烁。

我尝试过使用preserve在整个列表以及每个项目上div以防止它们更新，但这似乎并没有阻止滚动。我也尝试过{{#isolate}}几乎所有东西都被封锁，没有任何运气。

我可以在这里做些什么来使页面在重新渲染时不滚动吗？以不同的方式编写模板？某些方面preserve or {{#isolate}}我错过了什么？

页面滚动到顶部，因为您的<a href="#">Load more...</a>将使页面滚动到顶部。当您的 href 链接到“#”时，页面将滚动到带有#“元素 id”的 DOM 元素。单击仅包含“#”的链接将滚动到顶部。

您有两个选择：

1. 防止点击事件的默认行为（简单选项）：

   Template.loadMore.events({
   "click": function(event) {
     event.preventDefault();
     Session.set("itemCount", Session.get("itemCount") + 10);
   }   })
   

   这将停止页面重新加载

2. 更好的是：使<a href="#">Load more...</a>链接到"#{{_id}}"然后页面将自动滚动到具有您提供的 id 的元素。这将需要对模板进行一些重组，并且可能需要模板中的辅助方法来为您提供最后一项的 id。但它会让您的页面准确加载到您想要的位置。