在 Ember.js 中使用 HTML 锚点

【问题标题】：Using HTML anchors in Ember.js在 Ember.js 中使用 HTML 锚点
【发布时间】：2013-05-05 13:37:06
【问题描述】：

在我的 Ember 应用程序中，如何跳转到我的 Handlebars 模板之一内的 HTML 锚点？ I created a jsFiddle that shows what I want to accomplish.

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

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

【问题讨论】：

你在用什么type of url？默认情况下，Ember 使用哈希 (#)，它将与锚点发生冲突。从技术上讲，如果您实现 hashbang (#!) 客户端网址，您可以使用 scrollspy（或类似的东西）。
@MilkyWayJoe 我正在使用 Ember 默认的基于哈希的导航。我刚刚尝试了基于历史的导航，但它在我自己的应用程序和上面提到的 jsFiddle 中都不起作用（异常“No route matched the URL '/_display/'"）...感谢您提供我现在将调查的 scrollspy 和 hashbang 建议.
Ember.js anchor link 的可能副本

标签： html ember.js handlebars.js

【解决方案1】：

使用jquery 滚动到特定部分。

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

请参考this SO answer。

要在视图呈现后滚动到锚点，请覆盖您的路由视图定义中的 didInsertElement。

请参考this SO answer。

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

这里是 jsfiddle 中的a working example（为了清楚起见，我没有添加任何数据模型）

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

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

jsfiddle example 相同。

【讨论】：