title: swan.pageScrollTo header: develop nav: api sidebar: pagescrollto_swan-pageScrollTo

webUrl: https://qft12m.smartapps.cn/swan-api/page-scroll-to/page-scroll-to

解释：将页面滚动到目标位置（可以设置滚动动画时长）。

方法参数

Object object

object参数说明

属性名 类型 必填 默认值 说明
scrollTop Number 是 滚动到页面的目标位置（单位 px）
duration Number 否 300 滚动动画的时长，（单位 ms）
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

示例

扫码体验

webUrl: https://qft12m.smartapps.cn/swan-api/page-scroll-to/page-scroll-to - 图1 请使用百度APP扫码

代码示例1 - 页面滚动到顶部

在开发者工具中预览效果

:::codeTab

  1. <view class="container">
  2.   <image class="image" src="https://b.bdstatic.com/miniapp/images/longImage.png"></image>
  3.    <view class="swan-security-padding-bottom flex-button">
  4.         <button type="primary" bindtap="scrollToTop">返回顶部</button>
  5.     </view>
  6. </view>
  1. Page({
  2.     scrollToTop() {
  3.         swan.pageScrollTo({
  4.             scrollTop: 0,
  5.             duration: 300,
  6.             success: res => {
  7.                 console.log('pageScrollTo success', res);
  8.             },
  9.             fail: err => {
  10.                 console.log('pageScrollTo fail', err);
  11.             }
  12.         });
  13.     }
  14. });

:::

代码示例2 - 页面滚动到底部

在开发者工具中预览效果

:::codeTab

  1. <view class="container">
  2.   <image class="image" src="https://b.bdstatic.com/miniapp/images/longImage.png"></image>
  3.    <view class="swan-security-padding-bottom flex-button">
  4.         <button type="primary" bindtap="scrollToBottom">滚动到页面底部</button>
  5.     </view>
  6. </view>
  2. Page({
  3.     scrollToBottom(){
  4.         swan.createSelectorQuery()
  5.         .select(".image")
  6.         .boundingClientRect(function(rect) {
  7.             swan.pageScrollTo({
  8.                 scrollTop: rect.bottom,
  9.                 duration: 300,
  10.                 success: res => {
  11.                     console.log('pageScrollTo success', res);
  12.                 },
  13.                 fail: err => {
  14.                     console.log('pageScrollTo fail', err);
  15.                 }
  16.             });
  17.         })
  18.         .exec();
  19.     }
  20. });

:::

错误码

Android

错误码 说明
202 解析失败，请检查参数是否正确
1001 执行失败

iOS

错误码 说明
202 解析失败，请检查参数是否正确