小弟是菜狗一枚,记录一波页面回滚到顶部的顺滑效果。如果有更好的实现方法可以发起评论一起分享分享哦~

image.png
1.实现页面滑动到底部需回滚到顶部的效果

使用window.xxx方法对是页面的可视区域进行滚动,不会使抽屉组件一并滚动至顶部。此方式是通过递归调用的方式平滑滚动实现,其实也可以用behavior: "smooth"去实现平滑滚动

toTop() {
let gotoTop = function() {
let drawerPosition =
    document.documentElement.scrollTop || document.body.scrollTop;
    drawerPosition -= 10;
    if (drawerPosition > 0) {
        window.scrollTo(0, drawerPosition);
    } else {
        window.scrollTo(0, 0);
        clearInterval(timer);
        timer = null;
    }
};
var timer = setInterval(gotoTop, 1);
}

2.实现抽屉组件内容滑动到底部回滚到顶部时的效果
为了实现抽屉组件的滚动。那么要先取到抽屉组件内容里的元素哦~~
使用behavior: "smooth"属性滑动的过程得非常顺溜。

//js部分

toTop() {
    const drawerPositon = document.getElementById("drawer");
    drawerPositon.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest"
    });
  }
  
// html部分  

<Drawer
   title="Basic Drawer"
   placement="right"
   closable={false}
   onClose={this.onClose}
   visible={this.state.visible}
 >
   <div id="drawer">
     ....我是内容....
     。。。好多好多的内容 。。。
   </div>
</Drawer>

Twincos
52 声望0 粉丝

圆形战士