Pages gets reloaded when the href attribute contains '#'

Question

In my app-routing.modules.ts I have the following script:

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {SearchComponent} from './search/search/search.component';
import {RegisterComponent} from './register/register.component';
import {LoginComponent} from './login/login.component';

const routes: Routes = [
  { path: 'search', component: SearchComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent }
];

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

The HTML of my LoginComponent contains <a href="#">Top</a>. If the user clicks on that link, he will be redirected to the root page. I have also tried it with <a href="login/#">Top</a> but the same page will be reloaded.

What is the reason for that? I just want the user to jump on the top of the page.

Looks like a duplicate of https://stackoverflow.com/a/52724769/7291317. — Roman Mahotskyi, Nov 20 '19 at 14:07

score 1 · Answer 1 · answered Nov 20 '19 at 14:05

1

You can put a section that contains the top of your page with an ID like this:

<section id="top">
    <h1>Introduction</h1>
    <p>Top of the page </p>
</section>

Then in your link, you have to call the ID :

<a href="#top">Top</a>

answered Nov 20 '19 at 14:05

ChillAndCode

188
2
12

score 0 · Answer 2 · answered Nov 20 '19 at 14:18

0

My problem was that I have used / after login (like login/#). My solution was using href="login#". I still don't understand why I need to add login, since it is the same page but that works.

answered Nov 20 '19 at 14:18

xRay

543
1
5
29

score 0 · Answer 3 · answered Nov 20 '19 at 14:27

0

From Angular 6.1, You can pass extraOptions to your RouterModule.forRoot() as a second parameter and can specify scrollPositionRestoration: enabled to tell Angular to scroll to the top whenever the route changes.

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled', // Add options right here
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular Official Docs

answered Nov 20 '19 at 14:27

Chirag Vora

56
8

I have tried that but it will still redirect to the root page. – xRay Nov 20 '19 at 14:31

Raj · Answer 4 · 2019-11-20T15:32:00.643

0

Instead of # use href="javascript:void". this should work

edited Nov 20 '19 at 15:32

answered Nov 20 '19 at 14:33

Raj

385
2
15

instead of href = "#" use href = "javascript:void" in angular – Raj Nov 20 '19 at 15:13

Pages gets reloaded when the href attribute contains '#'

4 Answers4