Clever Geek Handbook

The next route does not open from the top of the page (scrolls below). What for?

Has anyone faced the same problem? I am using a template level subscription iron router.
For example. I have a long list "List of Items" where I can scroll down. Then I click on one of the elements somewhere at the bottom, and the next template gets lower than it should be.
Imagine browsing on YouTube, scrolling down the results, and then clicking on a piece of video, but it doesn't open up at the top, but below, so you have to scroll back to view the video.

I tried to put the "scroll up" script in the onRendered callback, but this "jump" is recognized by the naked eye. So it got worse.

(update) I found this solution for now:

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


source to share


3 answers


You should try this

meteor add okgrow:iron-router-autoscroll


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

+2


source


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



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


source


Try to throw this in your code and if your React usage throws it in the componentDidMount () function

window.scrollTo(0, 0);
0


source






More articles:


All Articles