React实现类似锚点切换效果

大聪明码农徐

已于 2022-07-25 11:56:44 修改

阅读量981

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js 前端 javascript

于 2022-06-30 18:24:03 首次发布

本文链接：https://blog.csdn.net/qq_45799465/article/details/125544583

React 专栏收录该内容

25 篇文章

订阅专栏

在React中，由于a标签会导致路由跳转，博主分享了一种利用DOM对象.scrollIntoView方法来实现点击事件定位的功能。通过设置block、behavior和inline参数，可以平滑滚动到目标元素的位置。关键代码包括在点击事件中获取元素并调用scrollIntoView方法，确保元素id与传入值匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题

博主在写代码的时候，遇到一个需求，要求实现一个点击事件，达到类似于html锚点效果的定位功能，将页面定位到对应的选择的地方，但reacr不能使用a链接去进行锚点的点击，因为a链接会触发路由跳转，因此博主搜罗八方，找到一个方法。

二、解决方法

DOM对象.scrollIntoView（{block：“”，behavior："",inline:""}）

block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。
behavior设定动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

三、代码

class Maodian extends Component {
    state = {
        applist: ["app1", "app2", "app3"]
    }
    hander = (value)=>{
        if(value){
            // 获取dom节点
            let anchorElement = document.getElementById(value)
            // 通过scrollIntoView方法

            // block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。

            // behavior设定动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
            
            // inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
            if(anchorElement) {anchorElement.scrollIntoView({block:"start",behavior:"smooth"})}
        }

    }
    render() {
        return (
            <>
                <div className="nav">
                    {
                        this.state.applist.map((item, index) => {
                            return <div
                                key={index}
                                className="box"
                                // 创建点击事件 传入对应的iterm
                                onClick= {() => this.hander(item)}
                                >
                                {item}
                            </div>
                        }
                        )
                    }
                    {
                        this.state.applist.map((item, index) =>{
                            return <div 
                            className='box2'
                            key={index}
                            // 循环生成三个大盒子生成对应item的 ID
                            id={item}
                            >
                                <h1>{item}</h1>
                            </div>
                        })
                    }
                </div>
            </>
        );
    }
}

关键函数：

hander = (value)=>{
if(value){
// 获取dom节点
let anchorElement = document.getElementById(value)
// 通过scrollIntoView方法

// block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。

// behavior设定动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。

// inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
if(anchorElement) {anchorElement.scrollIntoView({block:"start",behavior:"smooth"})}
}

}

需要注意的是，定位盒子的id要与你传入的值相对应，并能够通过document.getElementById(传入的值)拿到相对应的DOM节点，才能实现类似锚点的定位移动功能。

2022年7月25日补 ————————————————————————————————

博主是甜蜜的烧饼，andt官网就有这个插件