html - 在 Ember.js 中使用 HTML 锚点

Question

在我的 Ember 应用程序中，如何跳转到我的 Handlebars 模板之一中的 HTML 锚点？我创建了一个 jsFiddle 来显示我想要完成的事情。

背景
Ember 在应用程序中的导航模型使用 HTML 锚点。

我有以下要求：当用户单击 HandlebarlinkTo助手导航到新的路由目的地时，浏览器应自动滚动到与该新路由目的地关联的 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 示例。