Angular scroll to child position

Question

I am new to Angular. I have 2 views, one:

<div class="block">
  <p>
    one works!
  </p>
</div>

<router-outlet></router-outlet>

and two

<div class="block">
  <p>
    two works!
  </p>
</div>

I have created some CSS:

.block {
    height: 1000px;
    background-color: pink;
}

The idea is that two is a child of one but when you are on two, the content for one is still visible. This works with no issues. The problem, is that when I navigate to two, the page still stays at the top. I would like it to scroll (animated if possible) to the top of the <router-outlet> or two.

Can this be done?

score 1 · Accepted Answer · answered Aug 03 '18 at 11:19

1

In your HTML, provide block two a unique id:

<div id="block-two" class="block">
  <p>
    two works!
  </p>
</div>

In your ts, call this code on click event:

document.getElementById('block-two').scrollIntoView();

answered Aug 03 '18 at 11:19

Prachi

3,478
17
34

Where do I call that? in ngOnInit? Or ngAfterViewChecked or something else? – r3plica Aug 03 '18 at 11:24
After navigation. How do you navigate? Is block two a component? If yes, then in its ngAfterViewInit() – Prachi Aug 03 '18 at 11:26
You assigned the id to the outermost div? and write this line in ngAfterViewInit() of block two component – Prachi Aug 03 '18 at 11:31

score 0 · Answer 2 · answered Aug 03 '18 at 11:17

0

You have to get help of html anchor links here.

Please have a look at this link also

answered Aug 03 '18 at 11:17

Malindu Sandaruwan

1,477
2
13
27

Angular scroll to child position

2 Answers2