react怎么实现锚点滚动


本文摘自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

阅读剩余部分

相关阅读 >>

vue和React监听数据的区别是什么?

React开发预加载哪三个js文件?

React中同级组件如何传值

React如何引入css

vue和React能做什么

怎么在React代码中打断点

使用React写一个网站的心得体会

为什么React需要绑定this

如何在React页面中引入本地图片

浅谈React中获取数据的方法及其优缺点

更多相关阅读请进入《React》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...