【React】锚点效果实现(点击跳转定位位置)(内含demo)

前端之家收集整理的这篇文章主要介绍了【React】锚点效果实现(点击跳转定位位置)(内含demo)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

锚点:

链接的一种形式,快速定位到想要看的位置,常用在文章目录等位置。


那么问题来了

React不支持原生锚点的书写方式


所以怎么在React里实现类似锚点的效果

我的解题思路

1.在 url里 使用 anchor 参数

2.页面 解析 是否有anchor参数对应的id

3.有对应id的话,滚动到相应位置


代码实践

1.在 url里 添加 anchor 参数
                  <a link={child.link}>
                   {child.name}
                  </a>
2.页面 解析 是否有anchor参数对应的id

A.解析URL函数

getURLStuff(stuff) {
    let url = window.location.hash;
    let query = url.split("?").length > 1 ? url.split("?")[1] : "";
    let param = !!query ? query.split("&") : [];
    let resultSet = {};
    for (let i = 0; i < param.length; i++) {
      let params = param[i].split("=");
      if (params.length > 1) {
        resultSet[params[0]] = params[1];
      }
    }
    let result = resultSet[stuff] || "";
    return decodeURI(result);
  }

B.获取anchor对应的值

let anchor = this.getURLStuff("anchor");
    console.log("nlp anchor ",anchor);


3.有对应id的话,滚动到相应位置,没有的话,滚动到头部

html 代码

<div className="basic-feature-title" id={info.anchor}>
          {info.title}
        </div>

JS代码:

// 对应id的话,滚动到相应位置
    if (!!anchor) {
      let anchorElement = document.getElementById(anchor);
      if (anchorElement) {
        window.scrollTo(0,anchorElement.offsetTop - window.innerHeight / 2);
      }
    }
    // 没有的话,滚动到头部
    else {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

注意:

这里没有使用 scrollIntoView主要是滚动效果不理想,只会滚动到可视区域,不一定会到页面正中,所以建议使用下列代码

window.scrollTo(0,anchorElement.offsetTop - window.innerHeight / 2);



惯例上DEMO:

codepen链接

PS: 由于codepen内嵌iframe所以没办法用url调整,我用state做了个大致的效果,大家可以参考下~




原理:

锚点实现原理是:target选择器

感兴趣的同学可以点击下方参考链接继续学习:

1.URL锚点HTML定位技术机制、应用与问题

2.CSS3 :target 选择器

原文链接:https://www.f2er.com/react/301433.html

猜你在找的React相关文章