CODEWITHSUNDEEP
javascriptjqueryhtmlmeteor
MartinS
MartinS

Reputation: 105

Scroll to element on page using the elements id, Meteor

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

Upvotes: 4

Views: 3013

Answers (2)

chaosbohne
chaosbohne

Reputation: 2474

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.

Upvotes: 8

CodeChimp
CodeChimp

Reputation: 8154

You can scroll using jQuery like so:

$(document).scrollTop( $("#myElement").offset().top );

Where #myElement was the id of the element you want to jump to, like a div or such.

I would put this in my Template's rendered function like this:

Template.myTemplate.rendered = function() { $(document).scrollTop( $("#myElement").offset().top ); }

You could even get creative and pass in the element's ID you want to jump to as part of the data in your route, or through a Session variable. Or through some other means. Quite a few options, really.

Upvotes: 0

Related Questions