How can I scroll to an anchor in my angular page

Question

I want to create anchor in my angular page but it doesn't work and I don't know why.

My html component :

<h1 id="choose_package">Step 1 : choose a package</h1>
<div>Some elements</div>
<a [href]="choose_package">test</a>

But it return me null and go to 404 page.

Edit (now I can scroll but it's not done little by little):

this.router.events.pipe(filter(e => e instanceof Scroll)).subscribe((e: any) => {
    if (e.position) {
      this.viewportScroller.scrollToPosition(e.position);
    } else if (e.anchor) {
      this.viewportScroller.scrollToAnchor(e.anchor);
    } else {
      this.viewportScroller.scrollToPosition([0, 0]);
    }
  ;
});

Hi, when I try this I'm redirect to homepage – user10863293 Jan 14 '19 at 13:01 — user10863293, Jan 14 '19 at 13:01

score 0 · Answer 1 · answered Jan 14 '19 at 13:06

0

Anchor Scrolling are disabled by default at v6.1.0. Enable the anchor scrolling inside the route configuration

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Then use fragment

<h1 id="choose_package">Step 1 : choose a package for your license</h1>
<div>Some elements</div>
<a [fragment]="choose_package">test</a>

answered Jan 14 '19 at 13:06

Chellappan வ

23,645
3
29
60

Check this exmaple https://stackblitz.com/edit/dvl-ng-router-anchorscrolling?file=src%2Fapp%2Fapp.component.html – Chellappan வ Jan 14 '19 at 13:44
I have the same error : Unable to assign type '{anchorScrolling: string; scrollPositionRestoration: string; } 'to type' ExtraOptions'. An object literal can only specify known properties, and 'anchorScrolling' does not exist in the 'ExtraOptions' type. – user10863293 Jan 14 '19 at 13:53
Cab you check the Angular version – Chellappan வ Jan 14 '19 at 14:46
Angular CLI: 6.0.8 Node: 8.11.3 OS: win32 x64 Angular: 6.0.6 – user10863293 Jan 14 '19 at 14:56
I have mentioned it wil only work in angular 6.1. And don't use href it will load the page. – Chellappan வ Jan 14 '19 at 15:01
Hm, I have an error : Template parse errors: Can't bind to 'fragment' since it isn't a known property of 'a' – user10863293 Jan 14 '19 at 15:32
Is choose_package simple string or property? – Chellappan வ Jan 14 '19 at 15:46
it's a simple string – user10863293 Jan 14 '19 at 15:54
Try this [fragment]="'choose_package'" – Chellappan வ Jan 14 '19 at 16:01
Cab you create stackblitz if it possible – Chellappan வ Jan 14 '19 at 16:53
if you want to scroll to top then i suggest you to check this answer:https://stackoverflow.com/questions/53805045/angular-6-scroll-to-top-on-some-views/53805270#53805270 – Chellappan வ Jan 15 '19 at 10:32
Your stackblitz is not working because you have not added router-outlet and routerlink directive – Chellappan வ Jan 15 '19 at 10:33

score 0 · Answer 2 · answered Jan 14 '19 at 13:09

0

use Fragment to do it.

<h1 id="choose_package">
Step 1 : choose a package for your license
</h1>
<div>Some elements</div>
<a [fragment]="choose_package">test</a>

It will redirect to "choose_package" on the same page.

You also need to define in your rootModule the anchorScrolling

...
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ]
})
...

answered Jan 14 '19 at 13:09

Yoarthur

909
9
20

Hi, I have the error : Unable to assign type '{anchorScrolling: string; scrollPositionRestoration: string; } 'to type' ExtraOptions'. An object literal can only specify known properties, and 'anchorScrolling' does not exist in the 'ExtraOptions' type. – user10863293 Jan 14 '19 at 13:55

How can I scroll to an anchor in my angular page

2 Answers2