在Ember.js中使用HTML锚点 [英] Using HTML anchors in Ember.js
问题描述
背景
Ember通过应用程序导航的模型使用HTML锚点。
我有以下要求:当用户点击Handlebar linkTo
帮助器导航到新的路线目的地,浏览器应自动滚动到与新的路线目的地相关联的Handlebars模板内的锚点。
使用 jquery
滚动到特定的部分。
code> $('html,body')。animate({
scrollTop:$(a [name ='someAnchor'])。offset()。top
});
请参阅这个SO答案相同。
在渲染视图后滚动到锚点覆盖 didInsertElement $ c $您的路线视图的定义中的c>
请参阅此SO答案关于相同。
App.LonglistView = Ember.View.extend({
didInsertElement:function )$ {
$('html,body')。animate({
scrollTop:$(a [name ='someAnchor'] ).offset()。top
});
}
});
这里是一个工作示例在jsfiddle(我没有添加任何数据模型为了清楚)
编辑:你也可以使用非jquery执行滚动的方式
document.getElementsByTagName('a')[name ='someAnchor']。scrollIntoView()
In my Ember application, how can I jump to an HTML anchor inside one of my Handlebars templates? I created a jsFiddle that shows what I want to accomplish.
Background
Ember's model of navigation through an application uses HTML anchors.
I have the following requirement: when a user clicks on a Handlebar linkTo
helper to navigate to a new route destination, the browser should automatically scroll to an anchor inside the Handlebars template associated to that new route destination.
Use jquery
to scroll to a particular section.
$('html,body').animate({
scrollTop: $("a[name='someAnchor']").offset().top
});
Refer this SO answer regarding the same.
To scroll to the anchor after the view is rendered override the didInsertElement
in your definition for your route's View.
Refer this SO answer regarding the same.
App.LonglistView = Ember.View.extend({
didInsertElement: function() {
// Place the scroll to anchor code here.
$('html,body').animate({
scrollTop: $("a[name='someAnchor']").offset().top
});
}
});
Here is a working example in jsfiddle ( I have not added any data models for clarity )
EDIT: You could also use non-jquery way to do the scrolling
document.getElementsByTagName('a')[name='someAnchor'].scrollIntoView()
The jsfiddle example for the same.
这篇关于在Ember.js中使用HTML锚点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!