摘要
在开发项目中时常有点击跳转滚动到锚点的需求,最简单的锚点定位就是给一个a标签,a标签的href = ‘#锚点’,然后给需要跳转的锚点一个id = ‘锚点’。参考最简单的锚点跳转实现方式,在React中使用useRef来实现跳转锚点的功能。
功能具体步骤
1、创建空的Ref
1 2 3 4 5 6 7 8 9 10 | import React, { useRef } from 'react' ; const Layout = () => { const pageTopRef = useRef( null ); const sectionEventInfoRef = useRef( null ); return ( <div>滚动内容</div> ) } |
2、跳转锚点函数
Element.scrollIntoView()
方法让当前的元素滚动到浏览器窗口的可视区域内。我们可以利用该方法搭配Ref实现跳转锚点的功能,behavior属性可以定义动画过渡效果,跳转锚点时滚动效果平滑些。具体代码代码如下:
1 2 3 4 5 6 7 | // 点击导航按钮,滚动到页面中相对应的区域 const handleClickNavItem = ref => { setIsWork( false ); if (ref.current) { ref.current.scrollIntoView({ behavior: "smooth" }); } } |
3、锚点
bind()绑定ref,锚点处在绑定对应跳转ref,简化式代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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; |