vue/react的hash模式下的锚点效果

就是如链接所示：http://oa-img.oss-cn-qingdao.aliyuncs.com/up-img/pic-60044/xknTNnFHsxFaEJYJ3P5ZD82jnfXWTjHj.png，点击有好看的滚动效果，代码如下:

html:

 <div className="carBrandStyle" style={{display:start?'block':'none',right:start?'0':'-110%'}}>
        <ul id="ps" style={{marginTop: 0}}>
            <li className="commonCarTitle text_center font_bold flex relative">
                <i className="iconfont icon-angleleft absolute font20" onClick={t.closeAll.bind(t,'all')}></i>
                <span className="align_self_center">品牌</span>
            </li>
            {
                brandList.map((items, index) => (
                    <div>
                        <li className="byWords flex bg_ddd justify_content_center" id={words[index]}>
                            <span className="align_self_center font_bold fcolor_orange">{words[index]}</span>
                        </li>
                        {
                            items.map((item, index) => (
                                <li className="flex" onClick={t.getCarSeries.bind(t,item.brand_id,item.brand_name)}>
                                    <div className="flex align_self_center">
                                        <div className="carBrandImg align_self_center">
                                            <img src={item.car_logo_url} alt=""/>
                                        </div>
                                        <div className=" align_self_center">{item.brand_name}</div>
                                    </div>
                                </li>
                            ))
                        }
                    </div>
                ))
            }
        </ul>
        <div className="rnm" style={{right:start?'0':'-110%'}}>
            {
                words.map((item,index) => (
                    <div>
                        <a onClick={this.goScroll.bind(this,item)}>{item}</a>
                    </div>
                ))
            }
        </div>
    </div>
                
    css: 
  .carBrandStyle  {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  transition: all .3s linear;
  width: 100%;
  -webkit-overflow-scrolling: touch
}
.carBrandStyle ul  {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}
 .commonCarList .carBrandStyle li {
  height: 40px;
  border-bottom: 1px solid #ddd;
  padding-left: 10px;
}
    
js:这才是重点吧
    goScroll(word){
        let total = (document.getElementById(word)).offsetTop;
        let container = document.getElementById('ps');//想要scrollTop生效必须让容器是height:100%;overflow:scroll才行。
        let distance = container.scrollTop;
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50;
        if (total > distance) {
            smoothDown()
        } else {
            let newTotal = distance - total;
            step = newTotal / 50;
            smoothUp()
        }
        function smoothDown () {
            if (distance < total) {
                distance += step;
                container.scrollTop = distance;
                setTimeout(smoothDown, 10);
            } else {
                container.scrollTop = total;
            }
        }
        function smoothUp () {
            if (distance > total) {
                distance -= step;
                container.scrollTop = distance;
                setTimeout(smoothUp, 10)
            } else {
                container.scrollTop = total;
            }
        }
    }
复制代码