微信小程序scroll-view滑动的时候滑动到指定位置

效果实现

1.滑动的时候调动滑动事件bindscroll="scroll"

    我要在头部定义的标题栏



  这里面是你的一大堆内容

scroll-with-animation 过渡动画

scroll-top="{{scrolltop}}" 距离顶部多少高度

2.在调用scroll里面的事件函数

 data: {
   content: {
      isShow: false
    },
    scrolltop:0,
 }

这里使用的是获取手机屏幕大小的宽度res.screenWidth来自适应头部悬浮的位置的显示与隐藏

opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2) 目的是为了页面上划或者下划的时候实现渐显渐隐效果，但是页面调用的时候卡动，所以就直接去除掉了这个效果.

scroll: function(e:any) {
      const res = wx.getSystemInfoSync()
      if(res.screenWidth <= 330){
        if (e.detail.scrollTop >= 300) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            // console.log("向下滑动")
            // opacity:( 1 - e.detail.scrollTop / 100 / 3).toFixed(2)
            this.setData({scrolltop:300})
          }else{
            // console.log("向上滑动")
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }else if(res.screenWidth > 330 && res.screenWidth <= 365){
        if (e.detail.scrollTop >= 330) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            this.setData({scrolltop:330})
          }else{
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }else if(res.screenWidth > 365 && res.screenWidth <= 420){
        if (e.detail.scrollTop >= 377) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            this.setData({scrolltop:377})
          }else{
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }else{
        if (e.detail.scrollTop >= 395) {
          if (!this.data.content.isShow) {
            this.setData({
              'content.isShow': true
            })
          }
        } else {
          if(e.detail.deltaY < 0){
            this.setData({scrolltop:395})
          }else{
            this.setData({scrolltop:0})
          }
          if (this.data.content.isShow) {
            this.setData({
              'content.isShow': false
            })
          }
        }
      }
    },