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

阅读剩余部分

相关阅读 >>

React中如何引用json

React中push与replace的区别是什么

React中material-ui是什么

React 生命周期函数有哪些

React中如何引入样式

React hooks是什么?

React中怎么遍历对象

React中什么叫子组件

React全家桶都有什么

怎么修改React的antd默认样式

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




打赏

取消

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

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

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

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

评论

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