WeChat applet realizes clicking and sliding to the corresponding position

actual effect

slide demo effect

.wxml

<view id='move1'></view>

.js

moveTarget: function (e) {
    
    
	const that = this;
 	let scrollTop = 0;
 	const query = wx.createSelectorQuery();
 	query.selectViewport().scrollOffset();
 	query.exec(function (res) {
    
    
      scrollTop = res[0].scrollTop;
    });
	query.select('#move1').boundingClientRect(res => {
    
    
      	wx.pageScrollTo({
    
    
        	scrollTop: scrollTop + res.top, 
        	duration: 0
      	})
	}).exec();
}

.js (same as above, below contains comments)

moveTarget: function (e) {
    
    
	const that = this;
	//scrollTop 当前页面到顶部的距离
 	let scrollTop = 0; 
 	//wx.createSelectorQuery() 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。
 	const query = wx.createSelectorQuery();
 	//query.selectViewport() 选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。
 	//query.selectViewport().scrollOffset() 添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport，返回 NodesRef 对应的 SelectorQuery。
 	query.selectViewport().scrollOffset();
 	//query.exec() 执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。
 	query.exec(function (res) {
    
    
      scrollTop = res[0].scrollTop; //res[0].scrollTop距顶部的距离
    })
    //query.select()在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。
    //query.select('#move1').boundingClientRect
    //query.select('#move1').boundingClientRect() 添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
	query.select('#move1').boundingClientRect(res => {
    
    
		console.log("距顶部的距离：",scrollTop ,"  move1距当前页面的距离：",res.top);
		//wx.pageScrollTo() 将页面滚动到目标位置 
		//scrollTop:滚动到页面的目标位置，单位 px 
		//duration:滚动动画的时长，单位 ms
      	wx.pageScrollTo({
    
    
        	scrollTop: scrollTop + res.top, 
        	duration: 0
      	})
	}).exec();
}