page-scroll-to.uvue

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