React achieves a similar anchor switching effect

1. Problems

When the blogger was writing the code, he encountered a need to implement a click event to achieve a positioning function similar to the html anchor effect, and locate the page to the corresponding selected place, but reacr cannot use a link to anchor The click, because the a link will trigger a routing jump, so bloggers searched all directions to find a way.

Two, the solution

DOM object.scrollIntoView({block: "", behavior: "", inline: ""})

• block sets the vertical alignment to one of "start", "center", "end", or "nearest". Defaults to "start".

• behavior sets the animation transition effect, one of "auto" or "smooth". Defaults to "auto".

• inline sets the horizontal alignment to one of "start", "center", "end", or "nearest". Defaults to "nearest".

3. Code

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>
            </>
        );
    }
}

Key functions:

 hander = (value)=>{         if(value){             // get dom node             let anchorElement = document.getElementById(value)             // through scrollIntoView method

            // block sets the vertical alignment to one of "start", "center", "end", or "nearest". Defaults to "start".

            // behavior sets the animation transition effect, one of "auto" or "smooth". Defaults to "auto".
            
            // inline sets the horizontal alignment to one of "start", "center", "end", or "nearest". Defaults to "nearest".
            if(anchorElement) {anchorElement.scrollIntoView({block:"start",behavior:"smooth"})}
        }

    }

It should be noted that the id of the positioning box must correspond to the value you pass in, and the corresponding DOM node can be obtained through document.getElementById (passed in value), in order to realize the positioning and moving function similar to the anchor point.

Supplement on July 25, 2022 ——————————————————————————————————

Bloggers are sweet biscuits, andt official website has this plugin