How to do a single page (jump scroll) site with Iron Router?

I have a website where it’s a single page, and the navigation links simply jump the user around. Using Iron Router, this also has the benefit of working if they navigate directly to, for example,, whereas using other solutions, you might have to use a hash.

It works great, except in the case where the user is already at, and they scroll around a bit, then click “Contact Us” again. Nothing happens. I’m checking the routes in my landing page’s template’s onRendered callback:

Template.landingPage.onRendered(function () {
  this.autorun(() => {
    if (Session.get('products/loaded') === true) {
      let routeName = Router.current().route.getName();
      let sectionPos = $('#loc-' + routeName).offset().top;
      let headerHeight = $('header').outerHeight();

      $(window).scrollTop(sectionPos - headerHeight);

Is there a better way I can do this?

I think that you can just bind similar script to run when clicking on “Contact Us” or any other link pointing to same page. As you need.

The problem is, since all the routes use the same template, it’s only rendered once. I’m wondering if I should use Iron Router’s onAfterAction for this instead. Though I still need to check Session.get('products/loaded').

Well, that autorun code above should reactively wait for every route change and scroll to it anyway.
So I would expect every time you call Router.go as onclick handler for kinda links, it would scroll.

And in case of link to current page, I would generate it as separate event handler, not calling Router.go but zoomTo(routeName) or something like that.

That’s the problem though. If I’m at /contact-us and I scroll up a bit, then click the “Contact Us” link, nothing happens because technically it’s not a route change.

yes, thats why there is that event handler for that 1 place where would normaly be link, but you set your own onclick event handler, practically copying that 1 from autorun to do the scrolling without route change

Got it. Solved it by having a handler for navigation links, and a simple scroll function. I’d rather not have it as a single page scrolling site, but hey…clients. :slight_smile: