微信小程序点击分类跳到对应商品，滚动商品，对应详情选中,

直接上代码，自己领悟吧，有不足这处请留言

wxml

wxss

Page{
  background: #eeeeee;
}


.detail_container{}
.good_pic{
  width: 100%;
  height: 600rpx;
  border-bottom: 1rpx solid #ddd;
  
}
.back{
  position: fixed;
  top:30rpx;
  z-index: 99;
}
.swiper{
  width: 100%;
  height: 100%;
}
.x-goodInfo{
  /* box-sizing: border-box; */
  padding:20rpx;
  background: #fff;
}
.good{
  width: 100%;
  height: 1200rpx;
  margin-top: 20rpx;
}
.good-comment{
  
  
  background: blue;
  
}
.good-detail{
  
  
  
  background:pink;
  
}
.good-recommend{
  
  
  
  background:green;
  
}
/* ::-webkit-scrollbar{
  width: 0;
  height: 0;
  color:transparent;
  display: none;
} */
.x-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

}
/* 顶部导航 */
.topnav{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
position:fixed;
  top:0;
  left:0;
  padding-top: 120rpx;
  height:80rpx;
  background:#fff;
  text-align: center;
  z-index:9;
  width:100%;
}
.top-item{
  flex: 1;
  width: 100rpx;
}
.topnav text{
  flex: 1;
  color:#8f8f8f;
  font-size:26rpx;
  display: inline-block;
  margin:0 20rpx;
  /* border-bottom:4rpx #FE5723 solid; */
  padding:20rpx 0 10rpx;
}
.topnav text.active{
  color:red;
  border-bottom:4rpx solid red;
}

.js

// miniprogram/pages/good-detail/good-detail.js
const GoodDetail=require('../../model/detailModel.js');
const goodDetail = new GoodDetail.DETAIL();
const SystemInfo = require('../utils/systemInfo.js')
const systemInfo = new SystemInfo.SYSTEMINFO();
Page({

  /**
   * 页面的初始数据
   */
  data: {
     good:{},
     topNavArray:['商品','评价','详情','推荐'],
     scrollHeight:1234,
     toView:'',
     heightArray:[], //用来判断距离顶部的距离
     hiddenTopNav:true

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
       console.log(options);
       this._getWindowHeight();
       let id = options.goodId;
       goodDetail.getGoodDetailData(id)
       .then(res=>{
         console.log(res)
         this.setData({
            good:res
         })
         },error=>{console.log(error)})
         //初始化heightArray
        this._HeighttoTop();
  },
 //swiper点击事件
  onTouchImg(e){
    console.log(e);
  },
  //点击收藏onLike
  onLike(e){
    console.log('detail onLike')
  },
  //yScoll滚动y轴滑动
  yScoll(e){
    console.log(e);
    
    let heightArray = this.data.heightArray, //存储各节点距离scroll-view顶部的top值
      hiddenTopNav,//是否隐藏标签导航
      scrollTop = e.detail.scrollTop,//scroll-view滚动条距顶部的距离
      navActive //活动的节点
    //利用三元运算符得出hiddenTopNav的值，如果scrollTop大于100，则显示标签导航，否则隐藏
     hiddenTopNav = scrollTop > 80 ? false : true
    //将scroll-view滚动条距顶部的距离与各节点距离scroll-view顶部的top值比较，得出活动的标签下标，加头去尾判断
    let len = heightArray.length;
    let lastIndex = len-1;
    for (let i = 0 ; i < len; i++) {
    if (scrollTop >=0 && scrollTop < heightArray[0]) {
         console.log(scrollTop);
         console.log(heightArray[i])
         console.log(heightArray[0])
        navActive = 0
      console.log(navActive)
      this.setData({
        hiddenTopNav,
        navActive
      })
      return ;
    } else if (scrollTop >= heightArray[i] && scrollTop < heightArray[i+1]) {
      console.log(scrollTop);
      console.log(heightArray[i])
           navActive = i
      console.log(navActive)
      this.setData({
        hiddenTopNav,
        navActive
      })
       return;
     }else if(scrollTop>=heightArray[len-1]){
         
      console.log(scrollTop);
      console.log(heightArray[len-1])
         navActive=len-1;

      console.log(navActive)
      this.setData({
        hiddenTopNav,
        navActive
      })
       return;
     } 
    }
    
      
      
    
  },
  //跳转到特定页面
  goToFloor(e){
    console.log(e);
    let toView = e.currentTarget.dataset.floor;
    let navActive = e.currentTarget.dataset.index;
    this.setData({
      toView,
      navActive
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  //获取手机windowHeight
  _getWindowHeight(){
     let height = systemInfo.height;//这里使用ES6的get,set方法
     //此处减100是减去最底部加入购物车和立即购买按钮导航的高度，单位为rpx
      this.setData({
         scrollHeight:height-100
      })
      
  },
  //获取处个view 与top的高度。
  _HeighttoTop(){
    
    let query = wx.createSelectorQuery();
     let height=[];
     query.selectAll('.item')
          .boundingClientRect((rects)=>{
            rects.forEach((res)=>{
              console.log(res);
                height.push(res.top)

            })
         
          })
          .exec()
    this.data.heightArray = height;
  }
})

参考资源：

https://blog.csdn.net/weixin_42488377/article/details/81162676?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task，

https://blog.csdn.net/luowei85520/article/details/93166520