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

help
1

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, http://site.com/contact-us, whereas using other solutions, you might have to use a hash.

It works great, except in the case where the user is already at http://site.com/contact-us, 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?

2

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.

3

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').

4

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.

5

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.

6

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

7

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: