CODEWITHSUNDEEP
angularangular5angular-material-5
Tushar
Tushar

Reputation: 2078

Create Scroll to top button in Angular material 5

<button mat-icon-button>
    <mat-icon>keyboard_arrow_up</mat-icon>
  </button>

How to create scroll to top button in angular material 5?

Upvotes: 2

Views: 4488

Answers (2)

mruanova
mruanova

Reputation: 7115

Just add an event click and use JavaScript to scroll to top:

<button mat-icon-button (click)="window.scrollTo(0, 0);">
<mat-icon>keyboard_arrow_up</mat-icon>
</button>

https://www.w3schools.com/jsref/met_win_scrollto.asp

Upvotes: 4

Sean Patnode
Sean Patnode

Reputation: 171

The selected answer only works if the window is the element which is scrollable. So for example, if you have some other scrollable element on the page, window.scrollTo(0,0) will do nothing.

Instead you need to get the element like so,

@ViewChild('element') element: ElementType

And in the template you should have an element with this on it

<div #element></div>

then run this.element.nativeElement.scrollTo({top: 0, behavior: 'smooth'});

Upvotes: 1

Related Questions