react实现滚动到顶部组件

最新推荐文章于 2025-04-07 20:21:47 发布

点点关注不迷路

最新推荐文章于 2025-04-07 20:21:47 发布

阅读量1.1k

点赞数 9

文章标签： react.js html 前端

本文链接：https://blog.csdn.net/weixin_51526447/article/details/135840506

版权

本文介绍了如何在React项目中创建一个可自定义的ScrollToTop组件，该组件根据页面滚动距离显示或隐藏，点击时平滑滚动到顶部。组件利用useState和useEffect钩子实现事件监听和状态管理。

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

新建ScrollToTop.js

import React, { useState, useEffect } from 'react';
import './ScrollToTop.css';

function ScrollToTop() {
    const [isVisible, setIsVisible] = useState(true);

    // Show button when page is scorlled upto given distance
    const toggleVisibility = () => {
        console.log(1)
        console.log(window.scrollY)
        if (window.scrollY > 300) {
            setIsVisible(true);
        } else {
            setIsVisible(false);
        }
    };

    // Set the top cordinate to 0
    // make scrolling smooth
    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    };

    useEffect(() => {
        window.addEventListener("scroll", toggleVisibility);
        return () => window.removeEventListener("scroll", toggleVisibility);
    }, []);

    return ( isVisible &&
        <div  className="scroll-to-top" onClick={scrollToTop}>
            {isVisible &&
                <div onClick={scrollToTop}>
                    <i className="icon fas fa-chevron-up">1</i>
                </div>}
        </div>
    );
}

export default ScrollToTop;

css

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    background-color: #007BFF;
    color: white;
    border-radius: 50%;
    transition: visibility 0s, opacity 0.5s linear;
}

.scroll-to-top:hover {
    background-color: #0056b3;
}

.icon {
    font-size: 24px;
}

.scroll-to-top.show {
    visibility: visible;
}

使用