Meteor scrollTop not working

help
1

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

http://www.getwecare.com/#!
http://104.131.138.216/projects

Thanks

2

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

3

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

4

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.

5

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.'));
      this.render('login');
      this.stop();
    }
},
*/
// make sure to scroll to the top of the page on a new route
// Use: global
scrollUp: function() {
	$('body,html').scrollTop(0);
	//if(location.hash==="")$('body,html').scrollTop(0);
	/*$.localScroll({
		onAfter: function(target) {
            location.hash = target.context.id; //After smooth scrolling to anchor, add the hash to the browser address.
        }
	}, 3000);*/
	this.next();
},
6

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

onAfterAction: function() {
	if(document.body)
	{
		document.body.scrollIntoView();
	}
},
7

Hello,
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).

Template.landing.events({
// events go here
’click .page-scroll’: function(event){

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

});

Any idea to implement my need?
Thanks,
Olivier.

8

I don’t know exactly how detailled you wanna control the scrolling action but this package implements the most common cases after page transitions: https://atmospherejs.com/okgrow/iron-router-autoscroll

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: http://www.meteorpedia.com/read/Infinite_Scrolling

Hope it helps.

9

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 event.target and the code below works fine:

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

	var scrollTarget = event.target;

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

    event.preventDefault();
},

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

O.

1 Like