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 ...
随机推荐
- vue-cli# 项目结构
引自:https://segmentfault.com/a/1190000007880723 http://blog.csdn.net/hongchh/article/details/55113751 ...
- 玩转大数据系列之Apache Pig如何与Apache Solr集成(二)
散仙,在上篇文章中介绍了,如何使用Apache Pig与Lucene集成,还不知道的道友们,可以先看下上篇,熟悉下具体的流程. 在与Lucene集成过程中,我们发现最终还要把生成的Lucene索引,拷 ...
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
- Java基础(spring事物和锁)
使用步骤: 步骤一.在spring配置文件中引入<tx:>命名空间<beans xmlns="http://www.springframework.org/schema/b ...
- windows server 文件夹和搜索选项被禁用了
当我们需要调整 windows 文件夹相关的配置时,却发现“文件夹和搜索选项”被禁用了,下图是恢复正常的情况.被禁用时显示灰色,不能点击. 下面给出解决步骤: 打开“组策略”. 然后依次展开“用户配置 ...
- [转]【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox
反反复复考虑后,准备把这一章的切入点瞄准ListBox.并用了一个看起来有点别扭的标题“认识ListBox",许多人看到这里就不爱看了,即使是大学里用winform的学生也会说ListBox ...
- html常用标签6-表单标签
1.表单的初始化标签 <form action="#" method="get"><!--表单的开始--> </form> ...
- sqlserver 如何按年按月创建分区函数
我创建了分区函数如下:create partition function pf_month1(varchar(8))as range left for values ('20120131','2012 ...
- TZOJ 5963 Increasing Sequences(线性DP)
描述 Given a string of digits, insert commas to create a sequence of strictly increasing numbers so as ...
- Luogu P2292 [HNOI2004]L语言(Trie+dp)
P2292 [HNOI2004]L语言 题面 题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章 \(T\) 是由若干小写字母构成. ...