如何实现列表回到顶部的效果？

专题：ArkUI（eTS）常见UI效果汇总（更新中）

让list组件绑定Scroller事件，调用scroller.scrollToIndex(0)方法。代码如下：

收起
自动换行
深色代码主题
复制

@Entry@Componentstruct Index {  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]  scroller: Scroller = new Scroller()   build() {    Stack({ alignContent: Alignment.TopStart }) {      List({ scroller: this.scroller }) {        ForEach(this.arr, (item) => {          ListItem() {            Text('' + item)              .width('100%')              .height(100)              .fontSize(16)              .textAlign(TextAlign.Center)              .borderRadius(10)              .backgroundColor(0xFFFFFF)          }        }, item => item)      }      .divider({strokeWidth:1,color:0xcccccc})      .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果      .width('100%')       Button('回到顶部')        .onClick(() => {          this.scroller.scrollToIndex(0)        }).markAnchor({ x: '100%', y: '100%'})          .position({ x: '100%', y: '100%' }).margin(10)    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })  }}