[JavaScript知识库]React——返回顶部

使用

  const goBackTop=()=>{
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
 <div className="backtop" onClick={()=>goBackTop()}>
           
 </div>

全部代码

import React,{useState} from "react";
import copy from "copy-to-clipboard";
import { Affix, Button } from 'antd';
const Footer = () => {
  const linkloca = "https://blog.csdn.net/HarryHY";
  const copyfn = (linkloca: string) => {
    copy(linkloca, { debug: true, message: "Press #{key} to copy" });
  };
  const goBackTop=()=>{
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
  return (
    <>
      <div className="footerdiv animate__animated animate__bounceInLeft">
        <span>Blog:</span>
        <a href={linkloca} target="_blank">
          {linkloca}
        </a>
        <span
          className="copyspan"
          onClick={() => {
            copyfn(linkloca);
          }}
        >
          复制
        </span>
        <Affix   style={{ position: 'fixed', bottom: 100, right: 25 }}>
          <div className="backtop" onClick={()=>goBackTop()}>
           
          </div>
        </Affix>
      </div>
    </>
  );
};
export default Footer;

less

.footerdiv{
    text-align: center;
    font-family: Vladimir Script;
    background-color: #81d8d0;
    color: #fff;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    a{
        color: #fff;
        font-size: 40px;
    }
    .copyspan{
        cursor: pointer;
        font-size: 16px;
        display: inline-block;
        margin-left: 40px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        &:hover{
            color: #81d8d0;
            background-color: #fff;
        }
    }
}
.backtop{
    width: 60px;
    height: 48px;
    border-radius: 5px;
    
    background:top no-repeat url('./image/backicon2.png') ;
    cursor: pointer;
    &:hover{
        background:top no-repeat url('./image/backicon1.png') ;
    }
}