CODEWITHSUNDEEP
meteoriron-router
Dmitry
Dmitry

Reputation: 167

Next route opens not from the top of a page (scrolls lower). Why?

Have anyone faced the same problem? I'm using iron router with template-level subscription.
For example. I have a long page "list of items" where I can scroll down. Then I click on one of the items somewhere at the bottom and next template renders lower than it should be.
Imagine that you search on youtube, scroll down results and then you click on a video snippet but it opens not from the top but lower so you need to scroll back to top to see the video.

I've tried to put "scroll to top" script into onRendered callback but this "jump" is recognizable with a naked eye. So it become even worse.

(update) I've found this solution for now:

Router.onBeforeAction(function() {
  $(window).scrollTop(0);
  this.next();
});

Upvotes: 4

Views: 1122

Answers (3)

Mark Shust at M.academy
Mark Shust at M.academy

Reputation: 6429

If you are using FlowRouter, you can easily add this on a triggersEnter route definition:

const publicRoutes = FlowRouter.group({
  name: 'public',
  triggersEnter: [() => {
    window.scrollTo(0, 0);
  }],
});

Upvotes: 8

sampereless
sampereless

Reputation: 311

Try throwing this into your code and if your using React throw it in the componentDidMount() function

window.scrollTo(0, 0);

Upvotes: 0

Ryan W
Ryan W

Reputation: 6173

You should try this 

meteor add okgrow:iron-router-autoscroll

Reference: https://github.com/okgrow/iron-router-autoscroll

Upvotes: 3

Related Questions