问题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. JPA、Hibernate、Spring data jpa之间的关系

    什么么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支 ...

  2. 排列组合lucas模板

    //codeforces 559C|51nod1486 Gerald and Giant Chess(组合数学+逆元) #include <bits/stdc++.h> using nam ...

  3. 1.Spring【IOC】XML方式

    1.下载开发包 http://repo.springsource.org/libs-release-local/org/springframework/spring 2.创建WEB工程,引入jar包 ...

  4. linux 显示ip地址小工具-nali

    1.下载软件包 wget http://qqwry.googlecode.com/files/nali-0.1.tar.gz 2.安装 tar -zxvf nali-0.2.tar.gz cd nal ...

  5. HZOI20190722 B visit 组合数+CRT合并

    题目:https://www.cnblogs.com/Juve/articles/11226266.html solution: 30%:dp 设dp[k][i][j]表示经过k时间,在(i,j)的方 ...

  6. css的书写位置+元素分类

    1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...

  7. 开源代码分析-react-native-eyepetizer

    目录结构: app----imgs --- pages ------ home ------ explore ------ follow ------ profile ------  selected ...

  8. 通过原生JS打印一个空心菱形图案

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

  9. webService cxf学习

    1.首先去官网下载cxf包 http://archive.apache.org/dist/cxf/ 记住要选.zip结尾 大概40兆的样子 2.把上边的包都放项目里.如果你用的jeecg框架,那它自带 ...

  10. js 打开app应用,如果没有安装就去下载

    废话不多说,直接上代码 var APPCommon = { iphoneSchema: 'XingboTV://', iphoneDownUrl: 'https://itunes.apple.com/ ...