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
here is my code https://stackblitz.com/edit/angular-f9qxqh?file=src%2Fapp%2Fapp.component.html
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.
<div #container class="container">
<ul>
<li *ngFor="let i of items">{{i}}</li>
</ul>
</div>
<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();
}
jquery to give duration to complete this task.currently it move quickly to top .can we give duration
You add the scroll to your container, so it works on container not on ul
app.component.html
<div class="container" #container>
<ul #target>
<li *ngFor="let i of items">{{i}}</li>
</ul>
</div>
<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();
}
Typescript
ngOnInit(): void {
const scroller = document.querySelector(".wrapper");
scroller?.addEventListener("scroll", (event) => {
if(scroller?.scrollTop > 300){
this.windowScrolled = true;
} else{
this.windowScrolled = false;
}
});
}
scrollToTop(): void {
document.getElementsByClassName('wrapper')[0].scrollTo(0,0);
}
HTML
<p>
<a *ngIf="windowScrolled" class="topButton" (click)="scrollToTop()" title="Go to top">
<i class="pi pi-angle-double-up"><i class="pi pi-angle-double-up"></i></i>
</a>
SCSS
.topButton{
position: fixed;
transition: all 0.2s ease-in-out;
z-index: 1030;
right: 30px;
bottom: 50px;
font-weight: bolder;
cursor: pointer;
background-color: #002266;
color: white;
width: 23px;
height: 34px;
text-align: center;
vertical-align: middle;
border-radius: 15px;
padding: 3px;
}
