【React】实现锚点功能、点击按钮到顶部

先看需要实现的效果图：

实现方法：给标签添加id属性（往哪跳，就给哪个标签加），然后用下面的scrollToAnchor方法，废话不多说，直接上代码：

import React, { Component } from 'react';
class ComA extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    render() {
        var doms = [];
        for (var i = 0; i < 24; i++) {
            doms.push(<div>
                    <h3 id={'title' + i}>title{i}</h3>
                    <p>content{i}</p>
                </div>);
        }
        return (
            <div>
                <p id='top' >我是顶部</p>
                {
                    doms.map(function (value) {
                        return value;
                    })
                }
                <button onClick={this.scrollToAnchor.bind(this, 'top')} >点我到顶部</button>
                <br></br>
                <button onClick={this.scrollToAnchor.bind(this, 'title6')}>点我到title6的位置</button>
            </div>
        );
    }
}

export default ComA;

 

 

启蒙链接：https://www.jianshu.com/p/3ef8f490873d