my.pageScrollTo

2021-07-21 11:23

Scroll to the target position on the page
Note:
• The scrollTop has a higher priority than selector.
• When the my.pageScrollTo is used to jump to the top of the Mini Program, the scrollTop value must be set as a number greater than 0 to make jump possible.

Sample Code

copy

<!-- .axml -->
<view class="page">
  <view class="page-description">Page scroll API</view>

  <view class="page-section">
    <view class="page-section-title">
      my.pageScrollTo
    </view>
    <view class="page-section-demo">
      <input type="text" placeholder="key" name="key" value="{{scrollTop}}" onInput="scrollTopChange"></input>
    </view>
    <view class="page-section-btns">
      <view onTap="scrollTo">Page scroll </view>
    </view>
  </view>

  <view style="height:1000px"/>
</view>

copy

//.js
Page({
  data: {
    scrollTop: 0,
  },
  scrollTopChange(e) {
    this.setData({
      scrollTop: e.detail.value,
    });
  },
  onPageScroll({ scrollTop }) {
    console.log('onPageScroll', scrollTop);
  },
  scrollTo() {
    my.pageScrollTo({
      scrollTop: parseInt(this.data.scrollTop),
      duration: 300,
    });
  },
});

Parameters

Object type with the following attributes:

Property	Type	Default	Required	Description
scrollTop	Number	-	No	Scroll to the target position on the page, in px When the my.pageScrollTo is used to jump to the top of the Mini Program, the scrollTop value must be set as a number greater than 0 to make jump possible.
duration	Number	0	No	Duration of scroll animation, in ms.
selector	string	-	No	Selector.
success	Function	-	No	Callback function upon call success.
fail	Function	-	No	Callback function upon call failure.
complete	Function	-	No	Callback function upon call completion (to be executed upon either call success or failure).

Selector Syntax

When the selector parameter is transferred, the framework executes document.querySelector(selector) to select the target node.