0

In Angular 4 when router changes, the page don't Scrolls Top.

My solution is put a div with #top and in typescript I use ViewChild to scrollIntoView like

<div #top></div>

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('top') top: ElementRef;

And when initiate and load all I need I call

this.top.nativeElement.scrollIntoView();

This working to PC, but in Mobile, the clarity header hides (<clr-header>), when I scroll top with mobile, scroll headers show again, but get a bad experience to user, I want header show everytime.

Remembering, header is on root, and all nested routes is inside "router-outlet", so my solution to Scroll Top in nested routes don't work to root.

I try use this command in root, but not works, the "scroll Top" just work in nested routes.

I already tried following commands:

window.scrollTo(0, 0) Not works

document.body.scrollTop = 0 Not works

this.document.body.scrollTop = 0 (using Angular DOCUMENT module) Not works

And many others... Can anybody help?

james00794
  • 1,137
  • 7
  • 14
Gabriel Vaz
  • 1
  • 3

1 Answers1

0

Try 

window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop || 0

This will cover all the browsers and should work.

Jack A.
  • 4,245
  • 1
  • 20
  • 34
Abhizek
  • 1