1.效果图

2.html

<div><header><div class="arrow"><div class="left"></div></div><div class="search"><div class="search-img"><img src="../小米官网/images/search.png" alt="" srcset=""></div><input type="text" placeholder="搜索商品/店铺"></div><div class="dian">...</div></header><main><div class="left-section"><ul><li>热门商品</li><li>手机数码</li><li>京东超市</li><li>家用电器</li><li>电脑办公</li><li>热门商品</li><li>手机数码</li><li>京东超市</li><li>家用电器</li><li>电脑办公</li><li>热门商品</li><li>手机数码</li><li>京东超市</li><li>家用电器</li><li>电脑办公</li><li>热门商品</li><li>手机数码</li><li>京东超市</li><li>家用电器</li><li>电脑办公</li><li>热门商品</li><li>手机数码</li><li>京东超市</li><li>家用电器</li><li>电脑办公</li><li>热门商品</li><li>手机数码</li><li>京东超市</li><li>家用电器</li><li>电脑办公</li></ul></div><div class="right-section"></div></main></div>

2.js,关键document.documentElement.scrollTop,页面滚动属性

<script>// 获取元素let li = document.querySelectorAll('.left-section li');let content = document.querySelectorAll('.right-section div');// 高亮显示,排他,利用双重forEach,先去除active,再给点击内容单独添加activeli.forEach((item,index) => {item.onclick = (e) => {e.stopPropagation();li.forEach(i => {i.classList.remove('active')})// 页面未滚动时document.documentElement.scrollTop = (46 * index)  //点击触发scrollTop = 0 ,也就是回到顶部item.classList.add('active')}})// 监听页面滚动,滚动事件添加高度window.addEventListener('scroll', () => {li.forEach((item,index) => {item.onclick = (e) => {e.stopPropagation();li.forEach(i => {i.classList.remove('active')})// 页面滚动时,获取当前滚动高度,每个li的高度为46px,根据当前点击的li的索引值,乘以索引值，得到距离页面顶部的高度,即为需要滑动到顶部的距离document.documentElement.scrollTop = (46 * index)  //点击触发scrollTop = 0 ,也就是回到顶部item.classList.add('active')}})})</script>

3.css

*{padding: 0;margin: 0;
}
ul li,ol li{list-style-type: none;
}
header{width: 100%;height: 44px;display: flex;justify-content:center;align-items: center; border-bottom: 1px solid #ccc; position: fixed;top: 0; left: 0; z-index: 999999999999;/* 头部添加背景颜色意为main部分中ul滑动时隐藏内容 */background-color: #fff; 
}
.arrow{width: 5%;text-align: center;padding-left: 5%;
}
/* 左箭头 */
.left{border: 2px solid #000;width: 10px;height: 10px;border-left-color: transparent;border-top-color: transparent;transform: rotate(135deg);
}
.search{width: 80%;height: 30px;background-color: #cccccc;border-radius: 50px;line-height: 30px;display: flex;align-items: center;text-align: center;
}
.search-img{width: 10%;height: 25px;padding-left: 10px;
}
.search img{width: 25px;height: 25px;
}
.search input{width: 80%;outline:none;background-color: #cccccc;}
/* 修改input框中placeholder的样式 */
.search input::placeholder {color: rgba(0,0,0,0.6);font-size: 12px;
}
/* 去除input框的默认样式 */
input {border: none;outline: none;padding: 0;margin: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-image: none;background-color: transparent;font-size: inherit;
}input:focus {outline: none;
}
.dian{width: 10%;height: 44px;line-height: 35px;text-align: center;font-size: 20px;color: #000;
}
main{margin-top: 44px;height: 100%;display: flex;
}
.left-section{width: 25%;height: auto;min-height: 100%;overflow-y: hidden;border-right:1px solid rgba(0,0,0,0.1);background-color: #ccc;
}
ul{overflow-y: hidden;height: auto;
}
ul li{width: 100%;height: 46px;text-align: center;line-height: 46px;
}
.active{color: red;background-color: white;
}
.right-section{width: 75%;height: auto;min-height: auto;}

4.end