h5页面---点击左侧导航栏按钮，按钮自动跳转到页面顶部

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,再给点击内容单独添加active
        li.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