uniapp页面点击按钮，页面滚动到指定id位置

点击页面中的 签到明细，进行页面滚动

<view class="">
      <view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
        <view class="tn-bg-white tn-margin tn-text-center" style="border-radius: 20rpx">
          <view class="tn-flex tn-flex-row-around tn-padding-sm tn-bg-blue--light" style="border-radius: 20rpx 20rpx 0 0;">
            <text>积分余额</text>
          </view>
          <view class="">

            <view class="tn-padding">
              <text class="tn-icon-calendar tn-padding-right-sm"></text>
              <text @click="scrollToDetail">签到明细</text>
            </view>
          </view>
        </view>
      </view>
      

      
      <view class="tn-margin">
        <view class="screen-shadow tn-bg-white tn-padding tn-color-gray">

      </view>
    </view>
	
	<view class="tn-margin" id="detail">
	  <view class="screen-shadow tn-bg-white tn-padding tn-color-gray">
	  <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" v-for="(item,index) in integral" :key="index" >

	  </view>
	  </view>
	
	</view>

以下为js方法：

export default {
  methods: {
    scrollToDetail() {
      // 创建查询选择器
      const query = uni.createSelectorQuery().in(this);
      // 选择ID为'detail'的组件
      query.select('#detail').boundingClientRect();
      query.exec((res) => {
        if (res[0]) {
          // 使用页面滚动到指定的位置
          uni.pageScrollTo({
            scrollTop: res[0].top,
            duration: 300  // 滚动动画持续时间，单位 ms
          });
        }
      });
    }
  }
}