I've got a link that I want the user to press. When they press it, the router will go to a certain template and then run Smoothscroll.js code to animate and scroll down to the anchor tag.
//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')
works just fine.
$('html,body').animate({
scrollTop: $('#contact').offset().top
}, 1200);
Works as well by itself on the index template.
But when I try to run them together, the router goes to index, but the scrolling does not work.
Any idea how I can do this?
EDIT
This is what I have for the latest Meteor 1.0+ and a path like /#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
});
}
});
}
});
A router that works on the server and the browser, designed specifically for Meteor. You can install iron:router using Meteor's package management system: To update iron:router to the latest version you can use the meteor update command:
You can install iron:router using Meteor's package management system: To update iron:router to the latest version you can use the meteor update command: Start by creating a route in your JavaScript file.
A router that works on the server and the browser, designed specifically for Meteor. You can install iron:router using Meteor's package management system: To update iron:router to the latest version you can use the meteor update command: Start by creating a route in your JavaScript file.
Hook functions and all functions that get run when dispatching to a route are run in a reactive computation: they will rerun if any reactive data sources invalidate the computation. In the above example, if Meteor.user () changes the entire set of route functions will be run again.
Unless you're doing something fancy you probably don't want to use Router.go
and instead let iron-router manage routing on anchor click as it normally does.
As far as scrolling to an element is concerned, this is the onAfterAction
hook I'm using, it supports any route and any hash (/anyroute#anyhash
).
Router.onAfterAction(function() {
// always start by resetting scroll to top of the page
$(window).scrollTop(0);
var hash=this.params.hash;
// if there is a hash in the URL, handle it
if (hash) {
// now this is important : Tracker.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() {
var element=$("#"+hash);
var scrollTop = element.offset().top;
$("html,body").animate({
scrollTop: scrollTop
});
});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With