Ref实现导航滚动定位

摘要

　　在开发项目中时常有点击跳转滚动到锚点的需求，最简单的锚点定位就是给一个a标签，a标签的href = ‘#锚点’，然后给需要跳转的锚点一个id = ‘锚点’。参考最简单的锚点跳转实现方式，在React中使用useRef来实现跳转锚点的功能。

 

功能具体步骤

1、创建空的Ref　　

import React, { useRef } from 'react';

const Layout = () => {
    const pageTopRef = useRef(null);
    const sectionEventInfoRef = useRef(null);

  return (
      
滚动内容
  )  
}

2、跳转锚点函数

　　Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。我们可以利用该方法搭配Ref实现跳转锚点的功能，behavior属性可以定义动画过渡效果，跳转锚点时滚动效果平滑些。具体代码代码如下：

  // 点击导航按钮，滚动到页面中相对应的区域
  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 (
    

      

        

          首页
          活动详情
          精选作品
        
        

          
          

            回到首页的锚点
          
          
          

            活动详情的锚点
          
        
      
    
  )
}

export default Layout;

 

 

版权声明：本文为博主原创文章，转载请附上原文出处链接和本声明。