react版小米商城侧边栏按钮及回到顶部

import React from 'react';
import css from './Button.module.css';
import xiaomi from '../images/xiaomi.png';

export default class Button extends React.Component {
    constructor(props) {
        super(props)
  
        //show为true时回到顶部按钮显示，false时隐藏
        this.state = ({
          show: false
        })
        //将函数里的this指向绑定到当前组件，也就是组件ScrollToTop
        this.changeScrollTopShow = this.changeScrollTopShow.bind(this);
        this.scrollToTop = this.scrollToTop.bind(this);
      }
      //挂载事件监听
      componentDidMount() {
        window.addEventListener('scroll', this.changeScrollTopShow)
      }
      //卸载事件监听
      componentWillUnmount() {
        window.removeEventListener('scroll', this.changeScrollTopShow)
      }
    render() {
        const { show } = this.state;
        return (
            <div className={css.Button}>
                <a href="#!">
                    <div>手机APP</div>
                <li className={css.car}>
                        <img src={xiaomi} className="xiaomi" alt="cart" />
                        <span className={css.span}>
                            手机扫一扫分享赢好礼
                </span>
                    </li>
                </a>
                <a href="https://service.order.mi.com/apply/front">
                <div>个人中心</div>
                </a>
                <a href="https://service.order.mi.com/apply/front">
                <div>售后服务</div>
                </a>
                <a href="https://support.kefu.mi.com/page/index/v2?tag=cn&token=Y24ud2ViLm1pLmh0dHBzLm1vYmlsZSNyZWZlcmVy">
                <div>人工客服</div>
                </a>
                <a href="https://static.mi.com/cart/">
                <div>购物车</div>
                </a>
                <div className={css.scroll}>
                    {
            // 逻辑与符号左边的show为true时返回右边的html标签
            show && 
            <div 
              className = {css.scrollTop} 
              onClick = {this.scrollToTop}
            >
              <a href="#!"><div>回到顶部</div></a>
            </div>
          }
                </div>
            </div>
        );
    }
    changeScrollTopShow() {
        if (window.pageYOffset < 600) {
          this.setState({
            show: false
          })
        }else {
          this.setState({
            show: true
          })
        }
      }
      //添加动画效果
      scrollToTop() {
        const scrollToTop = window.setInterval(() => {
          let pos = window.pageYOffset;
          if ( pos > 0 ) {
            window.scrollTo( 0, pos - 20 );
          } else {
            window.clearInterval( scrollToTop );
          }
        }, 1);
      }
}


// css样式
.Button{
    position: fixed;
    bottom: 70px;
    right: 0;
    z-index: 99;
    width: 82px;
    height: 90px;
    display: block;
}
.Button a{
    position: relative;
    bottom: 450px;
    display: block;
    width: 82px;
    height: 90px;
    margin-top: -1px;
    background-color: #fff;
    border: 1px solid #f5f5f5;
    text-align: center;
    text-decoration: none;
    color: #757575;
}
.Button a:hover{
    color: #FF8126 !important;
}
.Button a:nth-of-type(1){
    background-image: url(../images/button1.png);
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 50%;
}
.Button .scroll .scrollTop a{
    background-image: url(../images/button9.png) !important;
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 50%;
    margin-top: 15px;
}
.Button .scroll .scrollTop a:hover{
    background-image: url(../images/button10.png) !important;
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 50%;
}
.Button a div{
    position: relative;
    top:55px;
    
}
.Button a:nth-of-type(1):hover{
    background-image: url(../images/button2.png);
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 50%;
}
.Button a:nth-of-type(2){
    background-image: url(../images/button3.png);
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 35%;
}
.Button a:nth-of-type(2):hover{
    background-image: url(../images/button4.png);
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 35%;
}
.Button a:nth-of-type(3){
    background-image: url(../images/button5.png);
    background-repeat: no-repeat;
    background-position-y:5px;
    background-position-x:center;
    background-size: 60%;
}
.Button a:nth-of-type(3):hover{
    background-image: url(../images/button6.png);
    background-repeat: no-repeat;
    background-position-y:5px;
    background-position-x:center;
    background-size: 60%;
}
.Button a:nth-of-type(4){
    background-image: url(../images/button7.png);
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 40%;
}
.Button a:nth-of-type(4):hover{
    background-image: url(../images/button8.png);
    background-repeat: no-repeat;
    background-position-y:15px;
    background-position-x:center;
    background-size: 40%;
}
.Button a:nth-of-type(5){
    background-image: url(../images/cart.png);
    background-repeat: no-repeat;
    background-position-y:10px;
    background-position-x:center;
    background-size: 50%;
}
.Button a:nth-of-type(5):hover{
    background-image: url(../images/car.png);
    background-repeat: no-repeat;
    background-position-y:10px;
    background-position-x:center;
    background-size: 50%;
}
.Button a:nth-of-type(1):hover .car{
    display: block;
    position: absolute;
    left: -140px;
    top: 0;
    width: 126px;
    height: 200px;
    margin-top: -1px;
    background-color: #fff;
    text-align: center;
}
.Button a:nth-of-type(1) .car img{
    display: block;
    width: 100px;
    height: 100px;
    margin: 6px auto;
}
.Button a:nth-of-type(1) .car span{
    display: block;
    width: 82px;
    margin: 14px auto 0;
    color: #757575;
    text-align: center;
   
}
.Button a:nth-of-type(1) .car{
    display: none;
}