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 ...
随机推荐
- MySQL模拟Oracle序列使用
https://www.runoob.com/mysql/mysql-using-sequences.html 一篇笔记开始看 注意:创建序列表时一定要有 主键id自增,否则为只读状态不能修改递增 ...
- 3.Spring框架中的标签与配置文件分离
1.Spring框架中标签的配置 1. id属性和name属性的区别 * id -- Bean起个名字,在约束中采用ID的约束,唯一 * 取值要求:必须以字母开始,可以使用字母.数字.连字符.下划线. ...
- win8 风格框架
http://metroui.org.ua/挺不错 bootstrap 系列的.
- 阿里云安全研究成果入选人工智能顶级会议 IJCAI 2019, 业界首次用AI解决又一难题!
8月10日至8月16日,国际人工智能组织联合会议IJCAI 2019(International Joint Conference on Artificial Intelligence 2019)在中 ...
- session中load()跟get()的区别
1.相同点:Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象. 2.区别在于: (1)如果未能发现符合条件的记录,get方法返回null,而l ...
- AIX系统搭建NFS服务器
本文使用场景:aix6.1升级到aix7.1之后,需要打补丁aix7.1 TL4的补丁,补丁文件有将近10G,当多个系统都升级时,此时搭建nfs服务器,只需要一次上传,其余需升级系统作为客户端只需通过 ...
- 简单易学的机器学习算法——基于密度的聚类算法DBSCAN
一.基于密度的聚类算法的概述 最近在Science上的一篇基于密度的聚类算法<Clustering by fast search and find of density peaks> ...
- 2018-8-10-WPF-使用不安全代码快速从数组转-WriteableBitmap
title author date CreateTime categories WPF 使用不安全代码快速从数组转 WriteableBitmap lindexi 2018-08-10 19:16:5 ...
- T2485 汉诺塔升级版(普及)(递归)
https://www.luogu.org/problem/show?pid=T2485 题目背景 汉诺塔升级了 题目描述 现在我们有N个圆盘和N个柱子,每个圆盘大小都不一样,大的圆盘不能放在小的圆盘 ...
- JosnRpcClient
<?php /** * Simple JSON-RPC interface. */ namespace org; class JosnRpcClient{ protected $host; pr ...