how to scroll the list to top on button click in angular?

could you please tell me how to scroll the list to top on button click in angular ?
I tried like this

scrollToTop(el){
el.scrollIntoView();
}

<button (click)="scrollToTop(target)">scroll to top</button>


It scroll the list to top .but it hide my addressbar and then user not able see header I think it is not a good solution .anybody have any other good solution

addressbar

header

here is my code
https://stackblitz.com/edit/angular-f9qxqh?file=src%2Fapp%2Fapp.component.html

2 Answers
2

You can scroll to the top of the list by setting the scrollTop property of the container to zero. See this stackblitz for a demo.

scrollTop

• {{i}}



<button (click)="container.scrollTop = 0">scroll to top</button>


Here is a simple method that scrolls smoothly to the top of the list. It is based on this answer by bryan60, and adapted to RxJS 6. You can try it in this stackblitz.

<button (click)="scrollToTop(container)">scroll to top</button>


import { interval as observableInterval } from "rxjs";
import { takeWhile, scan, tap } from "rxjs/operators";
...

scrollToTop(el) {
const duration = 600;
const interval = 5;
const move = el.scrollTop * interval / duration;
observableInterval(interval).pipe(
scan((acc, curr) => acc - move, el.scrollTop),
tap(position => el.scrollTop = position),
takeWhile(val => val > 0)).subscribe();
}


thanks for answering can we give some animation
– naveen
Jun 30 at 2:03

example as we do in jquery to give duration to complete this task.currently it move quickly to top .can we give duration
– naveen
Jun 30 at 2:05

jquery

duration

Some code for smooth scrolling with pure Javascript can be found in this post.
– ConnorsFan
Jun 30 at 2:16

I added a method for smooth scrolling, based on Observables.
– ConnorsFan
Jun 30 at 2:54

You add the scroll to your container, so it works on container not on ul

scroll

ul

app.component.html

• {{i}}


<button (click)="scrollToTop(container)">scroll to top</button>


app.component.ts

scrollToTop(el) {
el.scrollTop = 0;
}


For smooth scrolling, use this :

scrollToTop(el) {
var to = 0;
var duration = 1000;
var start = el.scrollTop,
change = to - start,
currentTime = 0,
increment = 20;

var easeInOutQuad = function(t, b, c, d) {
t /= d / 2;
if (t < 1)
return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}

var animateScroll = function() {
currentTime += increment;
var val = easeInOutQuad(currentTime, start, change, duration);

el.scrollTop = val;
if(currentTime < duration) {
setTimeout(animateScroll, increment);
}
}
animateScroll();
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.