javascript - 在 BackboneJS 中渲染 View 并滚动到顶部

Question

当我在 BackboneJS 中呈现 View 时，我只是替换了容器的 html:$('#container').html(this.template()) 并且它工作正常，但是当用户滚动时稍微向下翻页并按下呈现其他 View 的按钮，他的“滚动位置”保持在同一个位置，这会产生糟糕的用户体验。

我想要实现的是:当呈现新的主干 View 时，用户应该看到页面的最顶部(如果您单击普通链接会发生什么情况，这会将您带到另一个页面并重新加载整个页面)。

我怎样才能做到这一点？

Answer 1

有几种方法可以做到这一点，这里有一些基本示例可以帮助您入门。

在按钮的点击监听器中，您可以添加一个 window.scrollTo(0,0) 或 $(window).scrollTop(0);滚动到页面顶部。

或者您可以将此滚动触发方法直接放在您的 View 渲染回调中:

render: function() {
    $(window).scrollTop(0);
    return this;
}

或者，如果您的 View 实际上触发了一条新路由，您也可以监听 url 的变化，然后触发滚动。

var router = new AppRouter();
router.on("route", function () {
    $("html,body").scrollTop(0);
});