在 BackboneJS 中渲染视图并滚动到顶部

Question

当我在 BackboneJS 中呈现视图时，我只是替换了容器的 html：$('#container').html(this.template()) 并且它工作正常，但是当用户向下滚动页面并按下呈现其他视图的按钮时，他的 'scroll position' 仍然在同一个地方，这会产生糟糕的用户体验。

我想要实现的是：当呈现新的 backbone 视图时，用户应该看到页面的最顶部（如果您单击普通的 link，将带您到重新加载整页的另一页）。

我怎样才能做到这一点？

Answer 1

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

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

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

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

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

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

在 BackboneJS 中渲染视图并滚动到顶部

Render view and scroll to top in BackboneJS

html

javascript

jquery

backbone.js