问题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. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  2. 使用传统javaweb进行文件上传

    使用传统文件上传方式 1.配置依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sou ...

  3. Werkzeug库——wrappers模块

    Werkzeug库中的wrappers模块主要对request和response进行封装.request包含了客户端发往服务器的所有请求信息,response包含了web应用返回给客户端的所有信息.w ...

  4. 使用git命令从github上clone项目

    首先创建本地仓库(实际上就是创建一个文件夹,放项目代码),然后cd进文件夹, 初始化空的git仓库 注意:这里不初始化也是可以clone的 然后git clone url(url表示项目网址) 然后就 ...

  5. php条件语句(一)

    PHP If...Else 语句 条件语句用于根据不同条件执行不同动作. PHP 条件语句 当您编写代码时,您常常需要为不同的判断执行不同的动作.您可以在代码中使用条件语句来完成此任务. 在 PHP ...

  6. 3377加减乘除等于24(原生js实现)

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

  7. [转载] 使用C/C++语言编写基于DSP程序的注意事项

    原文地址:『转』使用C/C++语言编写基于DSP程序的注意事项作者:skysmile   1.不影响执行速度的情况下,可以使用c或c/c++语言提供的函数库,也可以自己设计函数,这样更易于使用“裁缝师 ...

  8. 新的开始 | Arthas GitHub Star 破万后的回顾和展望

    一切新的开始,都始于一个里程碑. 2月20日上午,Java 开源诊断工具 Arthas 的 GitHub Star 突破10000,距离开源后的第一个Release 版发布仅 147 天. 从中,我们 ...

  9. 20190817-T1-LOJ6322「雅礼国庆 2017 Day6」Star Way To Heaven

    写这篇题解是因为作者太蒻已经忘了最小生成树了. <题面> 这个题还真是想不到最小生成树. $80\%$算法 复杂度:$\Theta(k^2 \log N )$ 用了二分答案(明显答案具有单 ...

  10. PHP实现git部署的方法,可以学学!

    https://mp.weixin.qq.com/s/QFpKu8oKoxOEA1BmT7pNhg   在小站点上,直接用git来部署php代码相当方便,你的远程站点以及本地版本库都有一个版本控制,追 ...