Meteor scrollTop not working


I have these two sites working with meteor.
However, I cannot use jQuery scrollTop to scroll to anchor or any position.
Can anyone help?!



Can you post the code you’re using? Just linking to a site with compressed javascript isn’t much help.


Yes, please post some code. I use scrollTop() in my app without any problem.


If I remember rightly, I could only get scrollTop() working if I wrapped it in a Meteor.defer block as follows:

Meteor.defer(function () {
  // Tracker.flush();
  // scrollTop() stuff goes here
  // if it's still not working, uncomment the Tracker.flush() line

This means the scrollTop() function will run after all the relevant elements have had a chance to be rendered into the DOM, as the deferred function only gets run after everything else in the event loop has finished doing its thing.


Here’s the onBefore which doesn’t work

I’m confuse that I use scrollTop in the console and it still don’t work!

var IR_BeforeHooks = {
/*isLoggedIn: function() {
    if (!(Meteor.loggingIn() || Meteor.user())) {
      Notify.setError(__('Please login.'));
// make sure to scroll to the top of the page on a new route
// Use: global
scrollUp: function() {
		onAfter: function(target) {
            location.hash =; //After smooth scrolling to anchor, add the hash to the browser address.
	}, 3000);*/;


I use something similar with IR using the onAfterAction and it works.

onAfterAction: function() {


I’m quite new to Meteor and tried to use scrollTop without success. I have a landing page with several class=“page-scroll” and “href=”#part1 / #part2 / #part3" in the navbar. Something like:

Then, I have the following in my javascript to scroll to the right content (part1 / part2 / part3) when I click on one of the corresponding links.
It doesn’t work (no scroll) and it seems to me that I can’t get what I need from $(this).{
// events go here
’click .page-scroll’: function(event){

    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');


Any idea to implement my need?


I don’t know exactly how detailled you wanna control the scrolling action but this package implements the most common cases after page transitions:

On a different note, using jquery worked for me but not inside the event-map:

$(window).scroll( fancyFunction );

function fancyFunction() {
  if ($(window).scrollTop() > 50) {
    // do somethign
  } else {
    // do some other thing

see also this meteorpedia article:

Hope it helps.


Thanks tomsp, I’ll have a deep look at this package. Sounds interesting.
Finally I fixed my issue which was indeed with ‘this’. Instead I used the and the code below works fine:

'click .page-scroll': function(event, template){				

	var scrollTarget =;

console.log("page-scroll scrollTarget = " + scrollTarget);

	scrollTarget = "#" + _.str.strRightBack(scrollTarget, "#");

console.log("page-scroll final scrollTarget = " + scrollTarget);

    $('html, body').stop().animate({
        scrollTop: $(scrollTarget).offset().top
    }, 2500, 'easeInOutExpo');


Note that ‘_.str.strRightBack’ comes from the underscore_string Meteor package you need to add (meteor add wizonesolutions:underscore-string).