angular 2+, slide to the specified element by hash(#) url

Question

Html can jump to the specified position through hash(#) url, for example:

index.html:

<div id='loc_a'>
 loc_a
</div>
<div id='loc_b'>
 loc_b
</div>
<div id='loc_c'>
 loc_c
</div>

If you want to swipe directly to position loc_c, you can use the following URL:http:\\127.0.0.1:4200\index.html#loc_c

But angular router doesn't recognize hash URL, whether the specified element is in the main component or a child route.

Router example:

{
  path: '', component: mainComponent,
  children: [
    {path: '', component: childrenComponent},
  ]
}

You can refer this link for your question: [https://stackoverflow.com/questions/43945548/scroll-to-element-on-click-in-angular-4](https://stackoverflow.com/questions/43945548/scroll-to-element-on-click-in-angular-4) — Nitesh Goyal, Feb 06 '20 at 10:11

score 0 · Answer 1 · answered Feb 06 '20 at 10:14

0

const ele = document.getElementById(elementId);
if (ele) {
  window.scrollTo(ele.offsetLeft, ele.offsetTop);
}

answered Feb 06 '20 at 10:14

Tony Ngo

1 Answers1