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

1.效果图

2.html

        

            

                


                
            
            

                

                    
                

                
            
            

                ...

            
        
        

            

                

                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                
            
            

                 
            
        
    

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

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