返回顶部按钮功能异常
==========

#### 问题现象

商品详情页点击回到顶部按钮，页面向上滚动但未回到顶部，且滚动效果不连贯。

#### 背景知识

*   [List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list)列表包含一系列相同宽度的列表项。
*   [Scroller](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll#scroller)可滚动容器组件的控制器，可以控制容器组件的滚动。
    *   [scrollTo](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll#scrollto)：滑动到指定位置，可以设置动画效果。
    *   [scrollEdge](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll#scrolledge)：滚动到容器边缘，Scroll组件默认有动画，Grid、List、WaterFlow组件默认无动画。

#### 问题定位

1.  使用DevEco Testing查看滚动的组件，滚动组件为List，ListItem中是图片。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/20/v3/J_qlXIM_RWCA-iS4g3S3Vw/zh-cn_image_0000002628557790.png?HW-CC-KV=V1&HW-CC-Date=20260709T133919Z&HW-CC-Expire=86400&HW-CC-Sign=25F9E545A96FDCBA8F801F7717D51662040134E63C69CB8C229C3F29E25C30C1 "点击放大")
    
2.  检查List组件的滑动控制器Scroller，滑动位置是否设置有误，是否设置了滑动动画。

#### 分析结论

点击返回顶部按钮时，List组件的滑动控制器Scroller设置的滑动位置未设置到顶部，且未配置动画属性。

#### 修改建议

点击返回顶部按钮时，使用scrollTo或scrollEdge来实现滚动到顶部，并同时设置滚动动画效果。

@Entry
@Component
struct ListExample {
  private arr: number\[\] = \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20\];
  private scroller: Scroller = new Scroller();

  build() {
    Column() {
      List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical) _// 排列方向_
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring) _// 边缘效果设置为Spring_
      .onAppear(() => {
        this.scroller.scrollToIndex(0, false, ScrollAlign.CENTER);
      })
      .width('90%')
      .height('94%')

      Button('返回顶部')
        .onClick(() => {
          this.scroller.scrollTo({
            _// 设置滚动到顶部，并配置动画_
            xOffset: 0, yOffset: 0, animation: {
              duration: 1000
            }
          });
        })
        .margin(3)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}