antd中Anchor组件阻止默认路由跳转

2,304 阅读1分钟
使用Anchor组件时,添加click方法:
1、阻止默认事件 e.preventDefault();阻止link的href跳转路由事件;
2、使用H5的scrollToAnchor添加页面滚动效果:

代码如下:

handleClickFun= (e, link) => {
    e.preventDefault();
    if (link.href) {
        // 找到锚点对应得的节点
        let element = document.getElementById(link.href);
        // 如果对应id的锚点存在,就跳滚动到锚点顶部
        element && element .scrollIntoView({block:'start', behavior:'smooth'});
    }
};
// block:表示垂直方向的滚动对齐方式,“start”, “center”, “end”, 或 “nearest”
// behavior:表示动画效果,auto/smooth(滚动效果)