【发布时间】:2015-06-20 01:10:35
【问题描述】:
我有一个希望用户按下的链接。当他们按下它时,路由器将转到某个模板,然后运行 Smoothscroll.js 代码以动画并向下滚动到锚标记。
//When the user clicks on the link to get to the #contact anchor...
//The code below does not work.
Router.go('index');
$('html,body').animate({
scrollTop: $('#contact').offset().top
}, 1200);
Router.go('index') 工作正常。
$('html,body').animate({
scrollTop: $('#contact').offset().top
}, 1200);
在索引模板上也可以单独使用。
但是当我尝试将它们一起运行时,路由器会进入索引,但滚动不起作用。
知道我该怎么做吗?
编辑
这是我最新的 Meteor 1.0+ 和类似 /#contact 的路径
Router.route('/', {
name: 'index'
});
Router.onAfterAction(function() {
var self = this;
// always start by resetting scroll to top of the page
$(window).scrollTop(0);
// if there is a hash in the URL, handle it
if (this.params.hash) {
// now this is important : Deps.afterFlush ensures that iron-router rendering
// process has finished inserting the current route template into DOM so we
// can manipulate it via jQuery, if you skip this part the HTML element you
// want to scroll to might not yet be present in the DOM (this is probably
// why your code fails in the first place)
Tracker.afterFlush(function() {
if (typeof $("#" + self.params.hash).offset() != "undefined"){
var scrollTop = $("#" + self.params.hash).offset().top;
$("html,body").animate({
scrollTop: scrollTop
});
}
});
}
});
【问题讨论】:
标签: meteor iron-router