Mar*_*inS 4 html javascript jquery meteor
我的问题很简单,但我很难找到答案.我正在使用meteor来创建一个网站.使用我的流星我正在使用铁路由器来浏览我的页面AKA模板.我的头标始终保持不变.我只是通过使用铁制路由器更改主体中包含的模板来更改主体.我有一个包含带有id的锚标签的页面,我希望当我的模板由于用户导航到该页面而更改时页面会自动滚动到我的网页上的某个锚点.不幸的是,我只能提供代码片段,因为我正在为公司做网页而不想泄露信息.我认为代码片段就足够了.
我在AfterRun上尝试过铁路由器:
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);
}
}
我的网站结构的例子,显然不是一切.只是索引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.这可以通过在网址末尾添加"#"和ID来轻松完成.例如www.example.com/cpdEvents#events
不确定我是否理解你,但你也可以在流星中添加主题标签.只需通过点击你的href,将铁路由r路由到新的主题标签.
<li><a href="{{pathFor 'posts.index'}}"><span class='glyphicon glyphicon-home'></span> Blog</a></li>
<li><a href="{{pathFor 'overview' hash='about'}}"><span class='glyphicon glyphicon-user'></span> About Me</a></li>
<li><a href="{{pathFor 'overview' hash='meetup'}}"><span class='glyphicon glyphicon-map-marker'></span>My Meetup</a></li>
<li><a href="{{pathFor 'overview' hash='contact'}}"><span class='glyphicon glyphicon-envelope'></span> Contact Me</a></li>
如果在该页面上找到,则铁路由器会自动滚动到该主题标签.通过覆盖scrollToHash函数,您可以更改滚动行为.
Router._scrollToHash = function(hash) {
var section = $(hash);
if (section.length) {
var sectionTop = section.offset().top;
$("html, body").animate({
scrollTop: sectionTop
}, "slow");
}
};
看看我的网站点击.在那里,我可以访问aboutme,meetup,通过停留在同一页面上的导航栏,只需更改主题标签.
| 归档时间： |
|
| 查看次数： |
2828 次 |
| 最近记录： |