[英]how to scroll the list to top on button click in angular?
你能告诉我如何在 angular 中单击按钮时将列表滚动到顶部吗? 我这样试过
scrollToTop(el){
el.scrollIntoView();
}
<button (click)="scrollToTop(target)">scroll to top</button>
它将列表滚动到顶部。但它隐藏了我的地址header
addressbar
认为这不是一个好的解决方案。任何人都有任何其他好的解决方案
这是我的代码https://stackblitz.com/edit/angular-f9qxqh?file=src%2Fapp%2Fapp.component.html
您可以通过将容器的scrollTop
属性设置为零来滚动到列表的顶部。 有关演示,请参见此堆叠闪电战 。
<div #container class="container">
<ul>
<li *ngFor="let i of items">{{i}}</li>
</ul>
</div>
<button (click)="container.scrollTop = 0">scroll to top</button>
这是一种可以轻松滚动到列表顶部的简单方法。 它基于bryan60的 答案 ,并适用于RxJS6。您可以在此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();
}
您将scroll
添加到容器中,因此它适用于容器而不是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;
}
为了平滑滚动 ,请使用以下命令:
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.