问题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的更多相关文章

  1. ReactJS 页面跳转保存当前scrollTop回来时,自动移动到上次浏览器的位置

    在移动端的操作的时候,相信大家都遇到到这种情况,翻了好几页了,点击一项进去查,然后回来的时候,还想回来我原来的位置. google上也找了一此,有一个组件,但是好像是如果想实现这个功能,页面就得用那个 ...

  2. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  3. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  4. 在firefox浏览器下,scrollTop始终为0的问题

    firefox下,带dtd文档申明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. offsetTop、clientTop、scrollTop、offsetTop属性

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  6. reactjs 接入数据模型以及markdown语法的支持

    页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:  

  7. 初探ReactJS.NET 开发

    ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...

  8. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  9. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

随机推荐

  1. 从0开始学习ssh之岗位管理

    岗位应该有如下属性,id.名称.说明.新建role.java.添加id,name,description并增加三个的get set方法. 之后建立Role.hbm.xml 并加入到applicatio ...

  2. python的functools.partial的应用

    functools.partial是类似于创造“可移动”函数的意思,参数的第一个是函数名,其他的是这个函数其他参数,例如: generator_func = functools.partial( tf ...

  3. mysql三表联合查询,结果集合并

    参考: mysql 结果集去重复值并合并成一行 SQL 三表联查 数据库三表连接查询怎么做 合并: MySQL中group_concat函数 完整的语法如下: group_concat([DISTIN ...

  4. 理解最短路径-Dijkstra算法

    最短路径—Dijkstra算法和Floyd算法 透彻理解迪杰斯特拉算法 Dijkstra算法的使用条件:图中不存在负权边. ---------------------------有待验证------- ...

  5. 在ubuntu中安装phpstorm

    安装参考网址 https://blog.csdn.net/mrgong_/article/details/77200225 注意:不需要安装java相关 激活phpstorm 2018 参考网址:ht ...

  6. hibernate4注解字段为mysql的text

    文章的正文detail就需要设置为text 在getter方法上添加注解 @Lob @Basic(fetch = FetchType.LAZY) @Type(type = "text&quo ...

  7. sort方法

    作用:对列表进行排序 >>> spam=[2,5,3,14,1,-7] >>> spam.sort() >>> spam [-7, 1, 2, 3 ...

  8. 在银行业中,BP是指什么?

    基点 Basis Point(BP)债券和票据利率改变量的度量单位.一个基点等于0.01个百分点,即0.01%,因此,100个基点等于1%.[例]一浮动利率债券的利率可能比LIBOR高10个基点,10 ...

  9. CentOS如何升级openssl到最新版本

    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:CentOS如何升级openssl到最新版本: 环境信息 CentOS Linux release 7.6.1810 (Core): Op ...

  10. css3正方体效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...