reactjs scrollTop

问题1：


单页应用开发时，当在A页面滚动滚动条后，点击进入B页面，滚动条保持在A页面的滚动位置。

目标：


同级路由切换时，滚动条回滚到页面顶端。

解决方案：


//在componentDidMount周期添加scrollTo()class Home extends Component{componentDidMount(){window.scrollTo(0, 0);}
}

问题2：


在同一页面中点击回到顶部button，实现页面回到顶部.

目标：


onClick时，页面回到顶部。

解决方案：


&lt;div onClick={() =&gt; {document.documentElement.scrollTop = 0;}}&gt;&lt;/div&gt;

来源：https://segmentfault.com/a/1190000017439805

reactjs scrollTop相关推荐

top在html5里什么意思,html中的scrolltop是什么意思
scrolltop是jQuery中的一个方法,它可以设置元素中滚动条的垂直偏移量,基本的用法是: scrollTop() 方法返或设置匹配元素的滚动条的垂直位置. scroll top offset ...
Reactjs 踏坑指南3：一些例子（未完成）
React 踏坑指南3: 准备工作知识准备 Reactjs 踏坑指南1: 一些概念 Reactjs 踏坑指南2: JSX&&组件文件引用引用文件文件基本结构 <!DOCT ...
More than React（一）为什么ReactJS不适合复杂交互的前端项目？
<More than React>系列的文章会一共分为五篇和一则附录.本文是第一篇,介绍用 ReactJS开发时遇到的种种问题.后面四篇文章的每一篇将会分别详细讨论其中一个问题,以及Bin ...
使用reactjs做一个CRUD功能
第一步:引入reactjs所依赖的js文件,本案例使用的是bootstrap前端框架,所以引入了相应的js和css文件第二步:body里面添加两个div 第三步:开始编写reactjs脚本 < ...
关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
ReactJS学习笔记——npm、JSX、webpack
2019独角兽企业重金招聘Python工程师标准>>> #ReactJS学习笔记--npm.JSX.webpack [toc] React是一个JavaScript库文件,使用它的目 ...
关于scrollTop为0以及解决方法
一.当有DOCTYPE声明的时候, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
将h5用HBuilderX打包成安卓app后，document.documentElement.scrollTop的值始终为0或者document.body.scrollTop始终为0...
1 let time = setInterval(() => { 2 let scroll = document.documentElement.scrollTop || document.bo ...
利用scrollTop 制作图片无缝滚动
<!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8 ...

reactjs scrollTop

reactjs scrollTop相关推荐

最新文章

热门文章