Angular2 Hashtag routing to Anchor doesnt move page

Question

So I used the following post to figure out how to add a fragment to the url.

Angular2 Routing with Hashtag to page anchor

And the fragment gets added fine, however the page doesn't move to the resulting anchor. I have tried using both the name and id attribute on the destination div, but neither seem to work.

I'm using Angular Version 2.0.0-rc.3, and router version 3.0.0-alpha.6.

Thanks!

<a [routerLink]="[]" fragment="destination">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

There is enough space between the 2 elements to tell if the page actually moves.

And as said before, the url correctly adds #destination to itself.

Please add the code that demonstrate what you have tried. A Plunker to reproduce would be helpful. — Günter Zöchbauer, Aug 10 '16 at 15:15
I added the current method I am trying, but I have also tried changing it in a function using the `this._router.navigate( ['/somepath', id ], {fragment: 'test'});` example from the linked post. — jipson, Aug 10 '16 at 15:19
Can you please try with an actual route path like `Go TO DIV` — Günter Zöchbauer, Aug 10 '16 at 15:25
The current route is `/docs`, so I tried `Go TO DIV`, which still produces the correct url. However it still doesn't move. — jipson, Aug 10 '16 at 15:28

score 15 · Accepted Answer · answered Aug 19 '16 at 18:01

15

A workaround might be to write a function in your component that sets the location.hash to the id of the div you want to navigate to.

<a (click)="goTo('destination')">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

Then in your component:

goTo(location: string): void {
    window.location.hash = location;
}

answered Aug 19 '16 at 18:01

JohnMAC

166
1
3

5

I would add one note to this. It sets hash only once, so if the hash is already included in the page and you click on the same anchor link, it won't scroll to the destination. But it works if you clear the hash before setting -> `window.location.hash = ''; window.location.hash = location;` – Samurai Girl Apr 23 '17 at 20:47
I tried this, it works, but then everything above the target disappears. – JonathanPeel May 02 '17 at 14:06
1

Far less complicated than using the router. I understand why this is complicated because of routing and all that SPA stuff, but anchor links are such a basic feature. – Gilles Dec 29 '17 at 02:16

score 3 · Answer 2 · answered Jul 31 '17 at 12:13

3

Here's a very simple solution that worked for me:

In the component, add this method:

navigateTo(location: string): void {
// location will be a valid CSS ID selector; i.e. it should be preceded with '#'
window.location.hash = location;
setTimeout(() => {
    document.querySelector(location).parentElement.scrollIntoView();
  });
}

And in the view, the <a> tag will look like this:

<a (click)="navigateTo('#destination')">Destination</a>

answered Jul 31 '17 at 12:13

Soma Mbadiwe

1,594
16
15

Currently using Angular 4 / CLI. This was the BEST solution. Thank you! Also, simplest with smallest amount of code that actually worked. – Mindsect Team Oct 14 '17 at 22:44

JavierFuentes · Answer 3 · 2017-06-02T23:33:15.897

This worked for me:

First, prepare MyAppComponent for automatic scrolling in ngAfterViewChecked()...

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component( {
   [...]
} )
export class MyAppComponent implements OnInit, AfterViewChecked {

  private scrollExecuted: boolean = false;

  constructor( private activatedRoute: ActivatedRoute ) {}

  ngAfterViewChecked() {

    if ( !this.scrollExecuted ) {
      let routeFragmentSubscription: Subscription;

      // Automatic scroll
      routeFragmentSubscription =
        this.activatedRoute.fragment
          .subscribe( fragment => {
            if ( fragment ) {
              let element = document.getElementById( fragment );
              if ( element ) {
                element.scrollIntoView();

                this.scrollExecuted = true;

                // Free resources
                setTimeout(
                  () => {
                    console.log( 'routeFragmentSubscription unsubscribe' );
                    routeFragmentSubscription.unsubscribe();
                }, 1000 );
              }
            }
          } );
    }

  }

}

Then, navigate to my-app-route sending prodID hashtag

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component( {
   [...]
} )
export class MyOtherComponent {

  constructor( private router: Router ) {}

  gotoHashtag( prodID: string ) {
    this.router.navigate( [ '/my-app-route' ], { fragment: prodID } );
  }

}

score 2 · Answer 4 · answered Jul 04 '17 at 09:03

2

This workaround should do the trick

<div [routerLink]="[]" fragment="destination">
  <a href="#destination">Go TO DIV</a>
</div>

answered Jul 04 '17 at 09:03

Martin Cremer

5,191
2
32
38

1

Thanks, no TypeScript/JavaScript needed!. This stuff shouldn't be so hard. Feel like the wheel's being reinvented sometimes. – Oliver Oct 26 '17 at 02:17
It will not generate proper url on any path different than root. – Daniel Kucal Mar 27 '18 at 05:34

rafaelbiten · Answer 5 · 2017-11-17T17:34:16.103

After seeing all the solutions here, I decided to go with a small and simple directive. Here's what I ended up with:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appAnchorTo]' })
export class AnchorToDirective {
  @Input() target: string;

  constructor(el: ElementRef) { el.nativeElement.style.cursor = 'pointer'; }

  @HostListener('click', ['$event'])
  onClick() { document.querySelector(this.target).scrollIntoView(); }
}

The idea was to create something flexible, that could be attached to any element on the page.

Usage:

<a appAnchorTo target="#my-link">My Insights</a>
<div appAnchorTo target="#my-other-link">My Customers</div>

And don't forget to declare the directive on one of your Modules:

@NgModule({
    ...,
    declarations: [
        ...,
        AnchorToDirective,
    ]
})

score 1 · Answer 6 · answered Jan 03 '17 at 14:32

1

You can also use this plugin https://www.npmjs.com/package/ng2-page-scroll It does an animated scroll to a given anchor.

answered Jan 03 '17 at 14:32

svondervoort

76
6

score 0 · Answer 7 · answered Mar 02 '18 at 14:09

0

I've found very useful plugin available in nmp - ngx-scroll-to, which works great for me. However it's designed for Angular 4+, but maybe somebody will find this answer helpful.

answered Mar 02 '18 at 14:09

mpro

14,302
5
28
43

Angular2 Hashtag routing to Anchor doesnt move page

7 Answers7