Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Meteor Iron Router - Router.go callback possible?

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
                });

            }

        });
    }
});
like image 844
fuzzybabybunny Avatar asked Aug 14 '14 06:08

fuzzybabybunny


People also ask

What is the meteor router?

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:

How do I install and update iron router in 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.

What is the Iron router?

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.

What is react hook function in Meteor?

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.


1 Answers

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
      });
    });
  }
});
like image 147
saimeunt Avatar answered Nov 16 '22 03:11

saimeunt