uniapp将页面滚动到目标位置

最新推荐文章于 2025-06-26 16:48:56 发布

原创

最新推荐文章于 2025-06-26 16:48:56 发布 · 6.6k 阅读

收录于

当前文章被以下社区和专栏收录：

文章介绍了在uniapp中实现页面滚动到目标位置或返回顶部的两种方法。方式一是利用uni.app.pageScrollToAPI，设置scrollTop和duration参数实现平滑滚动。方式二是使用scroll-view组件，结合scroll-top属性和事件监听进行滚动操作，但不适用于有下拉刷新需求的场景。

uniapp将页面滚动到目标位置/返回顶部

这里分享其中两种方式，仅供参考~

文章目录

- uniapp将页面滚动到目标位置/返回顶部
- - 方式一：使用 `pageScrollTo`
  - 方式二：使用 `scroll-view`

方式一：使用 `pageScrollTo`

backToTop() {
   
   
    uni.pageScrollTo({
   
   
        scrollTop: 0, // 滚动到页面的目标位置（单位px）
        duration: 300 // 滚动动画的时长，默认300ms，单位 ms
    });
}