摘要 在开发项目中时常有点击跳转滚动到锚点的需求,最简单的锚点定位就是给一个a标签,a标签的href = '#锚点’,然后给需要跳转的锚点一个id = '锚点’。参考最简单的锚点跳转实现方式,在React中使用useRef来实现跳转锚点的功能。
功能具体步骤 1、创建空的Ref import React, { useRef } from 'react';
const Layout = () => {
const pageTopRef = useRef(null);
const sectionEventInfoRef = useRef(null);
return (
<div>滚动内容</div>
)
}
2、跳转锚点函数 // 点击导航按钮,滚动到页面中相对应的区域
const handleClickNavItem = ref => {
setIsWork(false);
if (ref.current) {
ref.current.scrollIntoView({ behavior: "smooth" });
}
}
3、锚点 bind()绑定ref,锚点处在绑定对应跳转ref,简化式代码如下所示:
import React, { useRef } from 'react';
import '../style.scss';
const Layout = () => {
const pageTopRef = useRef(null);
const sectionEventInfoRef = useRef(null);
// 点击导航按钮,滚动到页面中相对应的区域
const handleClickNavItem = ref => {
if (ref.current) {
ref.current.scrollIntoView({ behavior: "smooth" });
}
}
return (
<div className="activity-area">
<div className="actAr-wrapper">
<div className="actAr-tabs">
<button onClick={handleClickNavItem.bind(null, pageTopRef)}>首页</button>
<button onClick={handleClickNavItem.bind(null, sectionEventInfoRef)}>活动详情</button>
<button onClick={openEWorks}>精选作品</button>
</div>
<div className="actAr-content">
<!-- 锚点一 -->
<div ref={pageTopRef}>
回到首页的锚点
</div>
<!-- 锚点二 -->
<div ref={sectionEventInfoRef}>
活动详情的锚点
</div>
</div>
</>
</div>
)
}
export default Layout;
|
|