我的问题很简单,但我很难找到答案。我正在使用Meteor创建网站。使用Iron Router导航我的页面(也就是模板)。头标签始终保持不变,我只通过更改Iron Router中包含的模板来更改正文。我有一个包含id锚点的页面,当模板由于用户导航到该页面而更改时,我希望页面自动滚动到某个特定的锚点。不幸的是,我只能提供代码片段,因为我正在为一家公司做网页,并且不想泄露信息。我认为代码片段足够了。
我已经尝试过Iron Router的onAfterRun:
我已经尝试过Iron Router的onAfterRun:
Router.map(function(){
this.route("cpdEvents", {
path: "cpd.html#events",
onAfterRun: function() {
e.preventDefault();
$('html, body').animate({
scrollTop: $("a[name=events]").offset().top
}, 600);
}
});
});
我尝试了Meteor的模板渲染函数:
if (Meteor.isClient) {
Template.cpd.rendered = function (){
e.preventDefault();
$('html, body').animate({
scrollTop: $("a[name=events]").offset().top
}, 600);
}
}
这是我网站的结构示例,显然不包括全部内容。只有主页index.html和用户导航到的cpd.html。上面已经展示了JavaScript代码。
index.html:
<head>
<meta ..... />
<title></title>
</head>
<body>
{{> index}}
</div>
</body>
cpd.html:
<template name="cpd">
....
<a name="events"></a>
....
</template>
额外信息:
我正在使用的Meteor版本包含jquery库,我已经测试过我的jquery可以使用。
如果我没有使用Meteor,而是仅使用HTML。这很容易通过在URL末尾添加“#”和id来完成。例如:www.example.com/cpdEvents#events