0

I'm trying to use hook activate, didTransition, or willTransition, but none of these work, they do nothing at all. I try to start by one route:

// app/routes/section.js
import Route from '@ember/routing/route';

export default class SectionRoute extends Route { 
  ...

  activate() { scroll(0, 0); }
}

<!-- app/templates/section.hbs -->
<h1>{{model.title}}</h1>
<p>{{model.body}}</p>
{{outlet}}
{{#each model.subsections as |s| }}
  <Section @section={{s}} />
{{/each}}

This works in my js browser console:

scroll(0, 0);

This is my router

// app/router.js
...
Router.map(function() {
  this.route('docs');
  this.route('section', { path: '/docs/section/:slug' });
});

If I make section a child of docs, it works, as long as I don't hide parent's content, but I want to hide it. An anchor in link-to component could help.

When I remove this piece of css, it works.

html {
  scroll-behavior: smooth;
}
Chiara Ani
  • 918
  • 7
  • 25
  • Does `activate` run at all? Like, does a `console.log` print? Are you truly navigating between routes or is just the model changing? For `didTransition` and `willTransition`, did you use them as actions? https://api.emberjs.com/ember/3.20/classes/Route/events/didTransition?anchor=didTransition – Buck Doyle Aug 05 '20 at 17:50
  • Yes, it runs with `alert();` Yes, I'm navigating among routes. Yes, I used `didTransition` and `willTransition` as actions. – Chiara Ani Aug 05 '20 at 17:59

1 Answers1

0

Your approach is working as expected. I have created an Ember Twiddle to verify that one, which you can find here. It has two routes. One which scrolls to the top when activated and one which scrolls to bottom when activated. It's scrolling as expected.

I guess you may be facing issues with the hook if transitioning between subroutes? A route is considered to stay active and the activate hook is not called

  • if a transition does not change the route but only the dynamic segments or query parameters used for the route or
  • if a transition happens between subroutes of that route.

If you want to have scroll to top on every transition or want to have more granular control, which transitions should trigger that scrolling I would recommend to use routeDidChange event of RouterService instead.

jelhan
  • 6,149
  • 1
  • 19
  • 35
  • I've got the same problem with routeDidChange event of RouterService. – Chiara Ani Aug 05 '20 at 18:52
  • Something must be wrong your your code. The approach is working as demonstrated by the Ember Twiddle. Maybe there is another `window.scroll()` fired with conflicting arguments in parallel? Maybe an element is focused, which triggers a scroll? So many options. – jelhan Aug 05 '20 at 18:57
  • Your twiddle works. But if I write to the template, it is no longer working when I click it from not a parent route. – Chiara Ani Aug 05 '20 at 20:40
  • What do you mean by writing to the template? – jelhan Aug 05 '20 at 21:19
  • I mean writing in route section template, which I want to scroll. – Chiara Ani Aug 06 '20 at 08:14
  • I'm sorry I can't follow. Can you please provide an Ember Twiddle demonstrating your issue? – jelhan Aug 06 '20 at 12:28
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219360/discussion-between-chiara-ani-and-jelhan). – Chiara Ani Aug 06 '20 at 18:03