page-scroll-to.uvue

<template>
  <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>
</template>

<script lang="ts">
  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>