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><spanclassName="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') ;}
}

React——返回顶部相关推荐

使用 React Hooks实现一个返回顶部的按钮
[回到顶部]是许多网页非常常用的按钮,通常放在长页面的右下角,点击可以直接让页面回到顶端. 要实现这个组件,需要以下几个要点: 设置定位按钮定位设置为position: fixed,并且设置位置到屏 ...
点击按钮，丝滑的返回顶部
前言在开发过程中,一定会遇到需要返回顶部的操作,很多人都会直接返回顶部,就像跳转一样,降低了很大的体验,以下代码则是可以让你的返回顶部变得丝滑起来. 实现不论是原生,还是vue.react,此方法 ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
在octopress中增加“返回顶部”按钮
为什么80%的码农都做不了架构师?>>> <div id="main"><article class="hentry" ...
js返回顶部和始终保持底部
用到了三个部分: document.documentElement.scrollHeight //表示页面总高度,包含未显示的 document.documentElement.clientHeigh ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...

React——返回顶部

使用

全部代码

less

React——返回顶部相关推荐

最新文章

热门文章