reactjs scrollTop
问题1:
单页应用开发时,当在A页面滚动滚动条后,点击进入B页面,滚动条保持在A页面的滚动位置。
目标:
同级路由切换时,滚动条回滚到页面顶端。
解决方案:
//在componentDidMount周期添加scrollTo()
class Home extends Component{
componentDidMount(){
window.scrollTo(0, 0);
}
}
问题2:
在同一页面中点击回到顶部button,实现页面回到顶部.
目标:
onClick时,页面回到顶部。
解决方案:
<div onClick={() => {document.documentElement.scrollTop = 0;}}></div>
来源:https://segmentfault.com/a/1190000017439805
reactjs scrollTop的更多相关文章
- ReactJS 页面跳转保存当前scrollTop回来时,自动移动到上次浏览器的位置
在移动端的操作的时候,相信大家都遇到到这种情况,翻了好几页了,点击一项进去查,然后回来的时候,还想回来我原来的位置. google上也找了一此,有一个组件,但是好像是如果想实现这个功能,页面就得用那个 ...
- 一看就懂的ReactJs入门教程-精华版
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- ReactJS webpack实现JS模块化使用的坑
从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...
- 在firefox浏览器下,scrollTop始终为0的问题
firefox下,带dtd文档申明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- offsetTop、clientTop、scrollTop、offsetTop属性
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- reactjs 接入数据模型以及markdown语法的支持
页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:
- 初探ReactJS.NET 开发
ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...
- ReactJs笔记
中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
随机推荐
- JS写一个方法,传入一个数组,返回该数组的层深(维度)
现在我们有一个多维数组,我们想得到该数组的层深,即最大维度 如:var arr = [1, [4,[5,6,[7]]], [2,3]] = 0:返回4:那么我们该怎么做呢? 核心思想:递归,循环遍历 ...
- 比特承诺 Bit Commitment
Introduction-A story Alice:股票经纪人 Bob:股民 Alice:你的钱交给我,我替你买股票,我专业,挣钱多! Bob:怎么证明? Alice:我们上月买进的1 ...
- poj 3263
传送门 解题思路 如果x与y互相看见,那么他们一定比之间的高,所以给他们之间的高度-1,最后得到的答案是所有牛的高度+h,之间-1会T,用差分数组或线段树维护即可. 代码 #include<io ...
- location.hash的不一样用法
除了可以当做锚点,定位到同name位置,location.hash还有两个用法. 平时开发都会用得到. 一:使js事件在浏览器中产生历史记录. 举个栗子: 我们在JS里面改变了页面的数据.样式等,比如 ...
- Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---观察者模式之WeatherReport[转]
1 2{<HeadFirst设计模式>之观察者模式 } 3{ 主题与观察者 } 4{ 编译工具 :Delphi7.0 ...
- Linux 内存缓存占用过大,Centos7设置定时清除buff/cache的脚本
Linux系统buff/cache 中缓存数据占用内存过高,定时清理buff/cache ,释放系统内存 root权限创建脚本文件: touch cleanCache.sh && vi ...
- 简单易学的机器学习算法—SVD奇异值分解
简单易学的机器学习算法-SVD奇异值分解 一.SVD奇异值分解的定义 假设M是一个的矩阵,如果存在一个分解: 其中的酉矩阵,的半正定对角矩阵,的共轭转置矩阵,且为的酉矩阵.这样的分解称为M的奇 ...
- pycharm 安装与激活
---恢复内容开始--- 环境:Windows 专业版 1.下载安装 1.到官网下载专业版(专业版功能更全(但要激活码),社区版免费) 2.下载完后双击.exe 文件进行安装 NEXT 下一步 NEX ...
- mysql把表的指定字段值赋给本表另一个字段
原本是主键一对一关联的,后来发现这样操作很不方便,改成主外键一对一 所以添加一个外键字段bodyId(文章正文单独存一个表) UPDATE t_article SET bodyId=id; 但是等了半 ...
- python实现简单的百度翻译
这段时间,一直在学python,想找点东西实现一下,练手,所以我想通过python代码来实现翻译,话不多说,看吧! 以chrome为例 1 打开百度翻译 https://fanyi.baidu.co ...