在Ember.js中使用HTML锚点

Question

在我的Ember应用程序中,如何跳转到我的Handlebars模板中的HTML锚点？我创建了一个jsFiddle,显示了我想要完成的任务.

背景
Ember通过应用程序导航的模型使用HTML锚点.

我有以下要求:当用户点击Handlebar linkTo助手导航到新的路线目的地时,浏览器应自动滚动到与该新路线目的地相关联的Handlebars模板内的锚点.

Answer 1

用于jquery滚动到特定部分。

$('html,body').animate({
    scrollTop: $("a[name='someAnchor']").offset().top
});

请参阅此 SO 答案。

要在渲染视图后滚动到锚点，请覆盖didInsertElement路线视图定义中的 。

请参阅此 SO 答案。

App.LonglistView = Ember.View.extend({
    didInsertElement: function() {
        // Place the scroll to anchor code here.
        $('html,body').animate({
            scrollTop: $("a[name='someAnchor']").offset().top
        });
     }
});

这是jsfiddle 中的一个工作示例（为了清楚起见，我没有添加任何数据模型）

编辑：您还可以使用非 jquery 方式进行滚动

document.getElementsByTagName('a')[name='someAnchor'].scrollIntoView()

jsfiddle的例子也是如此。