Using HTML anchor link fragment in Angular 6

Question

I am working with an Angular 6 project in which I have disabled/removed hash-location-strategy which removes # from URL.

due to this change the link having:

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>

is no more working it just skips the current components URL and puts #contactTypes after localhost.

I found this github issue which should solve the issue using

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>

which puts #contactTypes at the end of the URL but it doesn't scroll to the top of the browser.

Source: https://github.com/angular/angular/issues/6595

score 62 · Accepted Answer · edited May 28 '19 at 18:07

62

Angular 6.1 comes with an option called anchorScrolling that lives in router module's ExtraOptions. As the anchorScrolling definition says:

Configures if the router should scroll to the element when the url has a fragment.

'disabled' -- does nothing (default).

'enabled' -- scrolls to the element. This option will be the default in the future.

Anchor scrolling does not happen on 'popstate'. Instead, we restore the position that we stored or scroll to the top.

You can use it like that:

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

// then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)

edited May 28 '19 at 18:07

Alvin Thompson

5,388
3
26
39

answered Oct 09 '18 at 15:41

Machado

8,965
6
43
46

29

Thanks for this answer. What I missed was that you have to use routerLink="./" fragment="anchorName" you can not use href="#anchorName" – PeterFromCologne Nov 27 '18 at 08:41
1

Also, this only works on the first click. Does not work on the 2nd. – Phil Jun 20 '19 at 05:28
12

For this to work on the 2nd click, you need to add `onSameUrlNavigation: 'reload'` option in the routerOptions. – Nitin Avula Sep 16 '19 at 16:02
This is how it should be implemented. – Abhishek Aggarwal Mar 27 '20 at 06:27
1

To get this solution to work I had to also add https://angular.io/api/router/ExtraOptions#scrollPositionRestoration – Jessy May 19 '20 at 17:18
1

Please note that this answer was based on Angular 6.1 and may not apply to current Angular version and beyond. – Machado May 19 '20 at 17:24
2

^^^ Confirmed, this does work in Angular 11 too. All options mentioned above work too, i.e. `anchorScrolling: 'enabled', onSameUrlNavigation: 'reload', scrollPositionRestoration: 'enabled'`. – Krishnan Feb 15 '21 at 15:47
1

Just wondering, how to make this work on page _load_? `anchorScrolling` doesn't work automatically then, e.g. if I open http://my-ng-app.com/route#section-1 in a new browser directly, it does not take me to "section-1". Probably there should be a setting or manual way of doing this? – Krishnan Feb 15 '21 at 15:49
Is there a solution with HashLocationStrategy (useHash)? It's a conflict. I think you can either use one or the other. With useHash you cannot use ``, results in 404. It's because the hash feature is already in use by Angular Router (e.g. the URL looks like `http://localhost:4200/#/`). Is there a solution or should I scroll with JavaScript? :( We cannot disable hash routing. – Domske Mar 10 '21 at 13:48

score 31 · Answer 2 · answered Jul 18 '18 at 10:51

31

I was looking for a similar solution and tried to use the ngx-scroll-to package and found that its not working in latest version of angular so decided to look into other option and found that we can use scrollIntoView

HTML code :

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Ts code :

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

answered Jul 18 '18 at 10:51

Joel Joseph

5,889
4
31
36

Thanks, your answer is absolute good and easy to understand with simple and short code – WasiF Sep 05 '18 at 08:29
can you provide for dynamic linking? There are other answers for this purpose but code is not simple – WasiF Sep 05 '18 at 08:38
4

This is not ideal, because it does not provide the user with a link that they can share with others, such as "example.org/help#installing". – ANeves Mar 26 '19 at 14:44
1

@ANeves Yes , "This is not ideal" right now, but that feature `achorScrolling` was not available when i answered the question. since angular 6.1 was released later .This solution may be helpful for those who work in older version of angular . Its great that solutions are evolving with every new version of angular – Joel Joseph Mar 26 '19 at 17:56

score 12 · Answer 3 · edited Dec 30 '21 at 18:15

12

This worked for me (I'm using Angular 12.1.3):

On the HTML template:

<a (click)="scrollTo('anchorId')">Scroll to another position</a>

Pass the id of the element you want to scroll to (without the hashtag symbol #) to the function.

Then, on Typescript, use .scrollIntoView to make the browser scroll to the position of that element.

scrollTo(element: any): void {
  (document.getElementById(element) as HTMLElement).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

edited Dec 30 '21 at 18:15

Peter Csala

17,736
16
35
75

answered Dec 30 '21 at 17:49

bc100k

129
1
3

In the HTML template: `
`
– MeerArtefakt Jun 10 '22 at 08:05

score 7 · Answer 4 · answered Aug 15 '19 at 15:38

For accessibility reasons I had to a link at the beginning of the document to provide direct access to the content to user using a screen reader, skipping that way parts of the page repeating from page to page.

As I needed the link to stay focusable (preferably keeping the href attribute), as I was actually outside the app-root or any component (still solution works inside a component), to do that I used simple good old fashion html and javascript :

<a href="./#content"
     onclick="event.preventDefault(); location.hash='content';"
     class="content-shortcut"
     title="Access page content directly"
     i18n-title
     aria-label="Access page content directly"
     i18n-label>Access page content directly</a>
  <style>
    .content-shortcut {
      position: absolute;
      opacity: 0;
      height: 0px;
      font-size: 1px;
    }

    .content-shortcut:focus,
    .content-shortcut:active {
      position: relative;
      opacity: 1;
      height: auto;
      font-size: 1em;
      display: block;
      color: black;
      background: white;
    }

  </style>

The best solution for meeting WCAG requirement to skip main navigation. Very simple and elegant. Thanks! — user1725382, Apr 30 '20 at 19:47

score 4 · Answer 5 · answered Jul 02 '20 at 21:04

4

This is for Angular 9, but, I am sure the community will benefit this,

You can use Location in the @angular/common to get the current path.

Let's say you have the following element with an id to focus

<div id="bring-me-to-the-focus">

I am only showing extracted code blocks here.

import { Location } from '@angular/common';

constructor(private location: Location) { }

this.location.path() + '#bring-me-to-the-focus';

I am sure this will help someone :)

Cheers.

answered Jul 02 '20 at 21:04

Anjana Silva

8,353
4
51
54

I don't think this is necessary since router provide this feature with `anchorScrolling` and `onSameUrlNavigation` – giovannipds Jan 14 '21 at 12:51

score 3 · Answer 6 · answered Nov 01 '19 at 12:52

As pointed out by Nitin Avula in a comment, using routerLink for a hash anchor only works if you are navigating to a different route or have onSameUrlNavigation enabled in your router config.

A way to get round this is to get rid of routerLink and instead use this.router.navigate in your *.component.ts file with the fragment parameter:

HTML -

<a (click)="scrollToContactTypes()">Contact Types</a>

TypeScript -

constructor(private router: Router) { }

scrollToContactTypes() {
    this.router.onSameUrlNavigation = "reload";
    this.router.navigate(["/settings"], { fragment: "contactTypes" }).finally(() => {
        this.router.onSameUrlNavigation = "ignore"; // Restore config after navigation completes
    });
}

Interesting answer if you're pretending to allow `onSameUrlNavigation = "reload"` for some reason IDK — giovannipds, Jan 14 '21 at 12:50

score 2 · Answer 7 · answered Jan 08 '19 at 17:34

2

use ngx page scroll

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>

answered Jan 08 '19 at 17:34

user7185558

53
3

2

Nice answer, it's working well. If you are in the /home page for example, you need to do href="home#anchor". +1 – PierreD Feb 01 '19 at 12:10
3

You do not need a library for that, this behavior is included in the angular router. – Machado Jun 21 '19 at 17:14
@Machado yes you are right we just need to add ` anchorScrolling: 'enabled'` in app routing module inside ExtraOptions for `forRoot` – Santosh Jul 20 '23 at 05:25

score -1 · Answer 8 · answered Sep 08 '18 at 09:41

-1

You need to use hash routing strategy to enable the hash scrolling.

you need to give second argument as an object like RouterModule.forRoot([],{useHash:true}}. It will work.

answered Sep 08 '18 at 09:41

Bhavesh Suvalaka

49
7

5

hash strategy deals with hashes as routes, isn't it so? – Ayyash Sep 12 '19 at 05:11

Using HTML anchor link fragment in Angular 6

8 Answers8

Linked

Related