使用Ref实现导航滚动定位

摘要

  在开发项目中时常有点击跳转滚动到锚点的需求,最简单的锚点定位就是给一个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;

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读