【React】锚点效果实现(点击跳转定位位置)(内含demo)
发布时间:2020-12-15 06:25:26 所属栏目:百科 来源:网络整理
导读:锚点: 超链接的一种形式,快速定位到想要看的位置,常用在文章目录等位置。 那么问题来了 React不支持原生锚点的书写方式 所以怎么在React里实现类似锚点的效果 我的解题 思路 1.在 url里 使用 anchor 参数 2.页面 解析 是否有anchor参数对应的id 3.有对应i
锚点:超链接的一种形式,快速定位到想要看的位置,常用在文章目录等位置。 那么问题来了 React不支持原生锚点的书写方式所以怎么在React里实现类似锚点的效果 我的解题思路1.在 url里 使用 anchor 参数 2.页面 解析 是否有anchor参数对应的id 3.有对应id的话,滚动到相应位置 代码实践1.在 url里 添加 anchor 参数<a link={child.link}> {child.name} </a> 2.页面 解析 是否有anchor参数对应的idA.解析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 选择器 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |