本文摘自PHP中文网,作者V,侵删。

提示:
要实现锚点滚动,不要使用a标签,因为这样会引发路由跳转。
(学习视频分享:react视频教程)
这里使用H5的新增API,scrollToAnchor
以前使用a标签的方法:
1 2 3 | < a href = '#activity1' ></ a > //定义锚点
< div name = 'activity1' ></ div > //跳转到的锚点
但是在单页面中,这样会进行前端路由的修改
|
使用scrollToAnchor API进行修改
1 2 3 4 5 6 7 8 9 10 11 12 | < a onClick={() => this.scrollToAnchor(name)}></ a > //定义锚点
< div id = 'activity1' ></ div > //跳转到的锚点
//函数定义
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在,就跳转到锚点
if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
}
}
|
block:表示滚动到锚点的顶部或者底部,start/end
阅读剩余部分
相关阅读 >>
redux和React有啥区别
React developer tools是什么?
React webpack是什么
vue和React属于js库吗
你会使用css锚点么
没有babel能运行vue与React吗
React向数组中追加数据的方法
React中怎么安装sass
React中如何引入图片
React和vue的区别及优缺点是什么
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » react怎么实现锚点滚动