Scroll to element on page using the elements id, Meteor

Question

My question is simple, but I am struggling to find the answer. I am using meteor to create a website. With my meteor I am using iron router to navigate my pages AKA the templates. My head tag always stays the same. I only change the body by changing the template that is contained within the body using iron router. I have a page containing anchor tags with ids, I want the page to automatically scroll to a certain anchor on my web page when my template changes due to the user navigating to that page. Unfortunately I can only supply code snippets, because I am doing the webpage for a company and do not want to leak information. I think the code snippets will be sufficient.

I have tried the iron router onAfterRun:

Router.map(function(){
this.route("cpdEvents", {
    path: "cpd.html#events",
    onAfterRun: function() {
        e.preventDefault();
            $('html, body').animate({
            scrollTop: $("a[name=events]").offset().top
            }, 600);
    }
    });
});

And I have tried the template rendered function of meteor:

if (Meteor.isClient) {
Template.cpd.rendered = function (){
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("a[name=events]").offset().top
    }, 600);
}
}

Examples of the structure of my website, obvious not everything. Just the index html and the cpd.html where the user navigates to. The JavaScript was already shown above.

index.html:

<head>
<meta ..... />
<title></title>
</head>
<body>
{{> index}}
</div>
</body>

cpd.html:

<template name="cpd">
....
<a name="events"></a>
....
</template>

Just extra information:

The Meteor version I am using contains jquery library and I have tested that my jquery works.

If I was not using meteor and using for example just HTML. This is easily done by adding '#' and the id at the end of your URL. Like www.example.com/cpdEvents#events

chaosbohne chaosbohne · Accepted Answer · 2014-12-30T12:21:55

Not sure if I understand you right but you can add hashtags in meteor too. Just route with iron-route r to a new hashtag by clicking your href.

<li><a href="{{pathFor 'posts.index'}}"><span class='glyphicon glyphicon-home'></span> Blog</a></li>
<li><a href="{{pathFor 'overview' hash='about'}}"><span class='glyphicon glyphicon-user'></span> About Me</a></li>
<li><a href="{{pathFor 'overview' hash='meetup'}}"><span class='glyphicon glyphicon-map-marker'></span>My Meetup</a></li>
<li><a href="{{pathFor 'overview' hash='contact'}}"><span class='glyphicon glyphicon-envelope'></span> Contact Me</a></li>

Than iron-router automatically scrolls to that hashtag if it is found on that page. By overriding the scrollToHash-function you can change the scroll behavior.

Router._scrollToHash = function(hash) {
  var section = $(hash);
  if (section.length) {
    var sectionTop = section.offset().top;
    $("html, body").animate({
      scrollTop: sectionTop
    }, "slow");
  }
};

Have a look on my website Click. There I have the access with the navbar on aboutme, meetup, contact by staying at the same page and just changing the hashtags.

Scroll to element on page using the elements id, Meteor

2 Answers