如何在React中添加"回到顶部"滚动功能

Question

我正在将“返回顶部”按钮添加到页脚中。点击该按钮后，页面会回到顶部。

点击“返回顶部”后，页面会回到顶部。

以下是我的代码

import React from 'react';

class ScrollTop extends React.Component {
    render() {
        return (
            <div className="scrolltop">
                <i className="fa fa-angle-up" />
            </div>
        );
    }
}

export default ScrollTop;

- Leela Hari Prasad. R

---

React只是JavaScript。不是所有的事情都必须按照“React方式”来完成。 - isherwood

Answer 1

只需使用纯JavaScript。

import React from 'react';

class ScrollTop extends React.Component {
    render() {
        return (
            <div className="scrolltop" onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
                <i className="fa fa-angle-up" />
            </div>
        );
    }
}

export default ScrollTop;

- Dupocas

---

该组件是无状态的，因此函数组件将会很好： function ScrollTop(){return(<div ... />)} - Taxel

Answer 2

"最初的回答" 可能会使用此函数。

handleScroll=()=>{
    window.scrollX(0);
    // or 
    window.scroll({top:0,behavior:'smooth'})

}

- Mohammed Al-Reai

Answer 3

1. 从https://www.npmjs.com/package/react-scroll安装react-scroll。

2. 像下面这样在您的组件中导入和使用（ES6风格）：

import { Link, animateScroll as scroll } from "react-scroll";

<Link 
to="/" 
className='someDiv'
onClick={()=>scroll.scrollToTop()}>
Logo
</Link>

点击元素（这里是Logo）即可看到魔法。

- Partha Roy

Answer 4

1. 在使用此代码之前，您必须安装react-router。

2. npm i react-router-dom

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function scrollTop() {
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname])

    return null;
}

- Marouf