uni.pageScrollTo(options) @pagescrollto

uni.pageScrollTo(options)

Parameters

PageScrollToOptions Values

Return value

AsyncApiSuccessResult Values

pageScrollTo Compatibility

# uni.pageScrollTo(options)

将页面滚动到目标位置

可以滚动到指定的scrollTop值处，也可以滚动到指定的目标元素处（通过css选择器selector）, 仅支持一级 class

app-uvue下，只有页面的根元素为scroll-view时，本API才生效。详见

# # Parameters

name	type	required	default	description
options	PageScrollToOptions	YES	-	-

# # PageScrollToOptions Values

name	type	optinal	default	description
scrollTop	number	NO	-	滚动到页面的目标位置
selector	string	NO	-	选择器
offsetTop	number	NO	-	偏移距离，可以滚动到 selector 加偏移距离的位置
duration	number	NO	-	滚动动画的时长
success	(result: AsyncApiSuccessResult) => void	NO	-	接口调用成功的回调函数
fail	(result: UniError) => void	NO	-	接口调用失败的回调函数
complete	(result: AsyncApiResult) => void	NO	-	接口调用结束的回调函数（调用成功、失败都会执行）

# # AsyncApiSuccessResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

# # AsyncApiResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

# # PageScrollToOptions Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
offsetTop	5.0	x	3.91	10.0	x	x

scrollTop 和 selector 必须指定其中一个属性，否者触发 fail 回调

# # Return value

Type	optinal
Promise<AsyncApiSuccessResult>	NO

# # AsyncApiSuccessResult Values

name	type	optinal	default	description
errMsg	string	YES	-	-

# # pageScrollTo Compatibility

Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
5.0	√	3.91	10.0	√	√

# # See also

pageScrollTo

Related Bug

selector 语法

selector类似于 CSS 的选择器，但仅支持下列语法。

ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes

# uni-app x 注意事项

app-uvue支持的选择器较少，不支持ID选择器，详见
app-uvue的页面滚动，是由页面最外层的scroll-view模拟的，如果页面最外层不是scroll-view，无法使用本api。详见
app-uvue的scroll-view滚动时，如需动画，则需要在scroll-view的属性中配置 scroll-with-animation="true"，详见
scroll-view的滚动，设置其scrollTop即可。详见

示例

uni.pageScrollTo({
	scrollTop: 0,
	duration: 300
});

# # Example

hello uni-app x

<template>
 <!-- #ifdef APP -->
 <scroll-view style="flex: 1" scroll-with-animation="true">
   <!-- #endif -->
   <view class="uni-padding-wrap">
     <page-head :title="title"></page-head>
     <button type="default" class="btn-scrollTo" @click="scrollTo">
       scrollTo
     </button>
     <button
       type="default"
       class="btn-scrollToElement"
       @click="scrollToElement"
     >
       scrollToElement
     </button>
     <view class="uni-list" v-for="(_, index) in 10" :key="index">
       <view class="uni-list-cell list-item">{{ index }}</view>
     </view>
     <view class="custom-element">scrollTo-custom-element</view>
     <view class="uni-list" v-for="(_, index2) in 10" :key="index2">
       <view class="uni-list-cell list-item">{{ index2 }}</view>
     </view>
   </view>
   <!-- #ifdef APP -->
 </scroll-view>
 <!-- #endif -->
</template>

<script>
export default {
 data() {
   return {
     title: 'pageScrollTo',
   }
 },
 methods: {
   scrollTo() {
     uni.pageScrollTo({
       scrollTop: 100,
       duration: 300,
       success: () => {
         console.log('success')
       },
     })
   },
   scrollToElement() {
     uni.pageScrollTo({
       selector: '.custom-element',
       duration: 300,
       success: () => {
         console.log('success')
       },
     })
   },
 },
}
</script>

<style>
.list-item {
 height: 100px;
 padding-left: 30px;
}
</style>