React js 返回顶部按钮

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量373 收藏 9
点赞数 10
文章标签： javascript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangtu13/article/details/136306230
版权 
  const handleClick = () => {
    document.querySelector(".getScroll").scroll(0,0);  
  };





<div className="getScroll" style={{ height: '100%', overflow: 'scroll' }}>
      <TouchableOpacity
        onPress={handleClick}
        style={{ position: 'absolute', right: 0, bottom: 50, zIndex: 100, backgroundColor: 'lightgreen' }}
      >
        <View>
          <Text style={{ color: 'blue', fontSize: 16, lineHeight: 20 }}>回到顶部</Text>
        </View>
      </TouchableOpacity>
</div>

dangtu13
关注
如何使用react完成点击返回顶部操作
mini74的博客
03-28 3273
首先我们先写返回顶部的样式 然后绑定一个点击事件，滚动到顶部 BackTop onClick={this.props.toTop}>返回</BackTop> toTop(){ console.log(111) window.scrollTo(0,0) } 这样就可以实现点击返回到顶部了。 接下来我们要写滚动到一定距离出现，那么我们就需...
JavaScript实现返回顶部按钮
weixin_46325878的博客
04-20 623
利用滚动事件（scroll)和点击事件(onclick)实现返回顶部按钮 1.当滚动的到某个位置出现返回顶部按钮 2.点击返回顶部按钮，立即跳到最顶部。
react中一键回顶功能
weixin_70238395的博客
08-17 181
【代码】react中一键回顶功能。
react实现页面后退按钮
jiao512的专栏
01-29 876
react实现页面后退按钮 import React from 'react'; import PropTypes from "prop-types"; static contextTypes = { router: PropTypes.object.isRequired }; backNav = () => { this.context.router.history.goBack(); } render () { return ( <Button className
点击按钮，回到页面顶部的5种写法
weixin_34153893的博客
10-23 1843
1.锚点方式： 1 &lt;body style="height:2000px;"&gt; 2 &lt;div id="topAnchor"&gt;&lt;/div&gt; 3 &lt;a href="#topAnchor" style="position:fixed;right:0;bottom:0"&gt;回到顶部&lt;/a&gt; 4 &a
【 react】react实现页面后退按钮（goBack（））
TwInkle
07-26 9603
安装 history npm install history --save-dev 在state里面请求 history，并实例化 this.state = { history: require("history").createHashHistory, }; 给图片（按钮）添加点击事件 <div className="goback">...
js实现点击按钮返回顶部
m0_74913905的博客
03-28 1130
利用html+css+JavaScript实现当往下滑动超过400像素后，显示按钮，点击可返回顶部，
react函数组件返回顶部按钮显示隐藏
06-03
你可以使用 React Hooks 来实现返回顶部按钮的显示和隐藏。具体实现步骤如下： 1. 使用 useState Hook 来定义一个状态变量，用于表示返回顶部按钮是否显示。 ```javascript const [showBackToTopButton, ...
react hook页面滚动到某一高度，显示回到顶部按钮
qq_36257356的博客
03-28 1261
回到顶部组件： import React, { useEffect, useState } from 'react'; import { ArrowUpOutlined } from '@ant-design/icons'; import PropTypes from 'prop-types'; function ToTop(props) { const { showPhone } = props; const [show, switchShow] = useState(false);
react+TS实现返回顶部
wpb1109的博客
12-10 370
第一种 js代码 import { Component, createRef } from "react"; import './scrolltop.css' interface Props { } interface State { } export default class ScrollTop extends Component<Props, State>{ ball = createRef<HTMLDivElement>(); time: num..
React公用scrollToTop（返回顶部）组件
莫小猪的菜鸟进阶路
06-20 2423
现在web页面要兼容各种设备，部分页面的内容长度在手机端就显得过于冗长。除了给客户提供一个按钮，一键返回顶部。更好的客户体验就是当客户做某种操作的时候，就自动滚动到顶端。这样就能顺畅的进行接下来的操作了。 目前我所接触到需要自动返回顶部的需求分为两种 当客户切换页面时 当客户当前页面进行某些操作或者顶端显示错误信息 总共两个步骤 1.创建一个单独的组件 import { Component } from 'react'; import { withRouter } from 'react-router-
react路由跳转之后回到页面顶部
baidu_38027860的博客
05-13 6444
开发一个官网时候发现一个问题，顶部导航栏跳转路由的时候，如果这时候我将页面滚动到底部，那跳转过去的路由页面也会再底部，这样的效果显然是不正确的，所以需要重置一个页面滚动条的位置，如下： document.documentElement.scrollTop = document.body.scrollTop =0; 先将滚动条位置重置之后再跳转路由即可。 ...
React页面点击悬浮按钮滑动定位到页面顶部
风行天下
06-17 2696
Web页面上，当某个页面内容特别多，下拉到底部的时候，想再返回页面顶部就得鼠标滚轮滑好多下，或者没有鼠标的话操作就更麻烦了。这个时候页面右下角往往会放一个悬浮按钮，点击按钮立即滑动到页面顶部，就方便了很多。本文就是此功能的一个简单的实现。在布局文件里加上这个按钮： 上面的代码里，IcoTop是自定义的一个图标，你可以替换为自己需要的图片地址。position: fixed 设置按钮的定位方式为基于浏览器窗口定位。这样不管页面滑动到什么位置，这个按钮始终显示在右下角，距离右边和底部60px。zIndex设
基于JS实现回到页面顶部的五种写法(从实现到增强)
牛仔不肥的笔记
08-14 8662
【1】锚点 使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点 击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 回到顶部 【2】scrollTop scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2688
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 591
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 407
实现中国地图各省数据案例
JavaScript基础
zhangh040629的博客
09-10 1269
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 342
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值