微信小程序点击固定导航栏滑动到指定元素位置

项目需求：头部固定导航栏，点击可以滑动到指定位置
第一步：获取导航栏的高度

//nav-list为导航的id
var navHight;
wx.createSelectorQuery().select('#nav-list').boundingClientRect(function(res){
	//输出为下面的图 主要用到top和height
	console.log(res);
	//id为元素的id
	//height元素的高
	//top为元素距离顶部的尺寸，可以说y轴 这个会随着页面滑动而变化，固定的导航栏就不会变化
}).exec();

第一步的console.log(res);

第二步：获取要滑动元素的参数（距离顶部的尺寸）

var target_id="#"+id;//元素的id
var to_target= wx.createSelectorQuery();
to_target.selectViewport().scrollOffset();
to_target.select(target_id).boundingClientRect();
to_target.exec(function(ret){
	//输出为下面的图 可以看到获取的是一个数组 主要用到ret[0]的scrollTop和ret[1]的top
	console.log(ret);
	//ret[0]的scrollTop为页面滑动了多少距离
	//ret[1]的top为元素距离顶部还差多少距离
	//ret[0].scrollTop + ret[1].top为页面没有滑动时（即页面滑动到了顶部），元素距离顶部的距离
	//navHight为第一步获取到的导航栏的高
	wx.pageScrollTo({
		duration:1000,
		scrollTop:ret[0].scrollTop + ret[1].top - navHight
	})
})

第二步的console.log(ret);

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！