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 ...
随机推荐
- VC控件DateTimePicker使用方法
出自http://www.cnblogs.com/52yixin/articles/2111299.html 使用DateTimePicker控件一般是获 取其时间替代手工输入带来的不便,而DateT ...
- C++面向对象高级编程(下)第一周-Geekband
勿在浮沙筑高台 革命尚未成功,同志仍需努力 <h1> Conversion Function</h1> class Fraction { public: Fraction(in ...
- Netty TCP粘包/拆包问题《二》
1.DelimiterBasedFrameDecoder:是以分隔符作为结束标志进行解决粘包/拆包问题 代码: EchoClient:客户端 /* * Copyright 2012 The Netty ...
- 跟我一起实战美团网一之[nodemon] app crashed - waiting for file changes before starting...
环境准备 第一步安装 npm install -g npx npx create-nuxt-app at-app 与事件相关的包我们再安装一次 npm install --update-binary ...
- python登录aspx网站
1.安装模块 2.准备aspx登录页面 3.示例代码 #coding:utf-8 import re from bs4 import BeautifulSoup import gzip import ...
- js前台中获取后台传的值
后台controller String ifOffice = "yes";req.setAttribute("ifOffice", ifOffice); 前台j ...
- python运~算~~符!!!!!!!!!!!
目录: 算术运算, 用于加减乘除等数学运算 赋值运算,用于接收运算符或方法调用返回的结果 比较运算, 用于做大小或等值比较运算 逻辑运算,用于做 与.或.非运算 位运算, 用于二进制运算 每种运算中所 ...
- nodejs+express 初学(一)
以下都是windows环境 1.下载nodejs http://www.nodejs.org/download/ 然后安装 2.确认已经安装完成 . node -v 3.安装express 注意: 是 ...
- Luogu P4011 孤岛营救问题(状态压缩+最短路)
P4011 孤岛营救问题 题意 题目描述 \(1944\)年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克得到 ...
- LeetCode389Find the Difference找不同
给定两个字符串 s 和 t,它们只包含小写字母. 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. 示例: 输入: s = "abcd&quo ...