HDTuto.com

Scroll to Top of Div Angular Example



Now, let's see article of angular scroll to top smooth example. We will use angular scroll to top of div on button click. In this article, we will implement a angular scroll to div on click. This article goes in detailed on scroll to top of div angular.

In this example, i will give you very simple example of how to scroll to top of div element in angular application. you can scroll to top smooth in angular 6, angular 7, angular 8 and angular 9 app.

you might need to auto scroll top or click to button scroll top for chat app or other task. you can easily do it using bellow simple example.

Let's see bellow preview and example code:

Preview:

Update Ts File: src/app/app.component.ts

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

import { interval as observableInterval } from "rxjs";

import { takeWhile, scan, tap } from "rxjs/operators";

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

scrollToElement(el): void {

const duration = 600;

const interval = 5;

const moveEl = el.scrollTop * interval / duration;

observableInterval(interval).pipe(

scan((acc, curr) => acc - moveEl, el.scrollTop),

tap(position => el.scrollTop = position),

takeWhile(val => val > 0)).subscribe();

}

}

Update HTML File: src/app/app.component.html

<h1>How to Scroll to Bottom of Div Element in Angular - HDTuto.com</h1>

<div #target>

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Libero ea tempora voluptatibus iusto maiores fuga? Tempore assumenda aspernatur

facilis et dolorum iusto maiores esse, earum laboriosam nostrum totam in

accusantium?

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Libero ea tempora voluptatibus iusto maiores fuga? Tempore assumenda aspernatur

facilis et dolorum iusto maiores esse, earum laboriosam nostrum totam in

accusantium?

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Libero ea tempora voluptatibus iusto maiores fuga? Tempore assumenda aspernatur

facilis et dolorum iusto maiores esse, earum laboriosam nostrum totam in

accusantium?

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Libero ea tempora voluptatibus iusto maiores fuga? Tempore assumenda aspernatur

facilis et dolorum iusto maiores esse, earum laboriosam nostrum totam in

accusantium?

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Libero ea tempora voluptatibus iusto maiores fuga? Tempore assumenda aspernatur

facilis et dolorum iusto maiores esse, earum laboriosam nostrum totam in

accusantium?

</div>

<button (click)="scrollToElement(target)">Click</button>

Update Css File: src/app/app.component.css

div{

height: 200px;

overflow: scroll;

}

Now you can check it.

I hope it can help you...




July 31, 2020 | Category : Angular



Blog Search