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 ...
随机推荐
- 近期开发storm遇到一些问题的解决点
storm开发解决问题点1.kafka消费速度跟不上问题 这个问题可以从加大topic partition进行解决,可以在topic正在运行时候运行命令 ./kafka-topics --alter ...
- react使用swiper,解决添加点击事件首位图片点击失效,解决轮播按钮被覆盖问题
JS部分 createSwiper1() { var option = { // slidesPerView: 5, slidesPerView: 3, centeredSlides:true, }; ...
- vue.js_11_路由的2中参数传递和路由的嵌套
1.以?的形式传递参数 <router-link to="/login?id=10&name=zs">登录</router-link> 发送参数 ...
- 获取请求header的各种方法
部分代码非原创 不定期更新 PHP function get_all_header() { // 忽略获取的header数据.这个函数后面会用到.主要是起过滤作用 $ignore = array(' ...
- jmeter-监听器介绍与使用
12.jmeter-监听器介绍与使用 jmeter-监听器介绍与使用 察看结果树 Summary Report 聚合报告 Backend Listener Aggregate Graph 断言结果 C ...
- mapreduce join操作
上次和朋友讨论到mapreduce,join应该发生在map端,理由太想当然到sql里面的执行过程了 wheremap端 join在map之前(笛卡尔积),但实际上网上看了,mapreduce的笛卡尔 ...
- 用windows命令解压chm文件
Windows里有这样一个工具:hh.exe.hh.exe最重要的功能就是用来关联CHM文件,当你运行一个chm文件的时候,系统就是用这个工具来打开的. 其实它还有另外一个功能——解压CHM文件在CM ...
- vue 权限管理
核心想法: 登陆后获得用户角色,通过角色获得用户的权限,注入权限对应的路由.刷新页面,从localStorage用角色(更好的方式是通过token)再次获得所属权限,再次注入路由.在管理界面左端循环权 ...
- Leetcode485.Max Consecutive Ones最大连续1的个数
给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 注意: 输入的数组 ...
- Effective Modern C++ 条款3:理解decltype
说起decltype,这是个古灵精怪的东西.对于给定的名字或表达式,decltype能告诉你该名字或表达式的型别.一般来说,它告诉你的结果和你预测的是一样的.不过,偶尔它也会给出某个结果,让你抓耳挠腮 ...