react界面跳转,滚动到顶部
在使用react-router-dom时,我们经常会遇到路由切换时滚动到浏览器顶部的问题。
滚动到顶部 Scroll to top
很多时候我们需要的是滚动到顶部“Scroll to top”,因为发现好像所有的单页面都有一个通病,就是页面进行跳转时,当前所在的位置和你上个界面所在的位置一样,显然这样对于用户来说体验不是很好。
我们可以使用使用一个<ScrollToTop>组件来帮助我们每次导航到一个页面的时候,滚动到顶部。确保使用 withRouter
包裹它,以传递route的属性props
import React, { Component } from 'react';
import {withRouter} from 'react-router-dom'
import 'moment/locale/zh-cn';
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0);
}
} render() {
return this.props.children;
}
}
export default withRouter(ScrollToTop);
在你的app之前,Router之后渲染它
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Root from './router/Router';
import * as serviceWorker from './serviceWorker';
import './index.css';
import './static/fonts/iconfont.css';
import ScrollToTop from '../src/models/scrollToTop'
// ReactDOM.render(<Root />, document.getElementById('root'));
ReactDOM.render(
<BrowserRouter>
<ScrollToTop>
<Root />
</ScrollToTop>
</BrowserRouter>, document.getElementById('root')); serviceWorker.unregister();
注:这个方法在页面跳转过程中非常有用,但是对于那种界面上有分页有很长的界面,每点击跳转一页的时候,界面位置还是在原来的位置,这个时候我们可以自己写一个组件,在界面中import backTop from '......'的componentDidMount(){backTop()}中引用就可以了。
export function backTop(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
//window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,0);
}
}
react界面跳转,滚动到顶部的更多相关文章
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- 如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter
PS 感谢大家的关注,由于我本想开源4个库,除了router, 另外三个分别是native dispatcher, web dispatcher 和 react dispatcher , 所以rout ...
- iframe内点击a标签禁止滚动到顶部
在iframe内加载的表中,操作下的按钮用a标签布局,但是会出现一个非常不好的体验,就是当页面有滚动条的时候,点击a标签,列表会自动滚动到顶部. 首先看我的a标签: <a href=" ...
- scrollTop如何实现click后页面过渡滚动到顶部
用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...
- Android ScrollView 滚动到顶部
有时候使用ScrollView,里边控件比较多的时候,打开界面,会滑到底部,如果要设置滑动到顶部,一般有两种方法 1.使用fullScrol(),scrollView.fullScroll(Scrol ...
- Android 手机卫士--设置界面&功能列表界面跳转逻辑处理
在<Android 手机卫士--md5加密过程>中已经实现了加密类,这里接着实现手机防盗功能 本文地址:http://www.cnblogs.com/wuyudong/p/5941959. ...
- iOS界面跳转的一些优化方案
原文地址: http://blog.startry.com/2016/02/14/Think-Of-UIViewController-Switch/ iOS界面跳转的一些优化方案 App应用程序开发, ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- Android activity界面跳转动画
实现activity界面跳转动画 1.在startActivity方法之后加入: overridePendingTransition(R.anim.pull_in_right, R.anim.pull ...
随机推荐
- SQL Server存储过程数据库日志文件备份的脚本-干货
还是拿数据库AAAAAAAA为例子 CREATE PROC [dbo].[p_log_backupAAAAAAAA] @dbname sysname='', ...
- EXPDP导数报ORA-00942案例
使用数据泵(expdp)导数时遇到了ORA-31626 & ORA-00942 错误,数据库版本为Oracle Database 10g Release 10.2.0.5.0,具体错误如下所示 ...
- 服务器安装neo4j
neo4j是目前最流行的图形数据库,支持完整的事务.在树形图中,图是有顶点.边和属性组成的,顶点和边都可以设置属性,顶点又称节点,边也叫做关系.每个节点和关系都可以有一个或多个属性,neo4j创建的图 ...
- 以特定用户和组来执行某个程序 - linux
运行cockpit 服务时,我们指定运行此程序的用户和组:cockpit-ws cockpit-ws 我们使用 sudo -u -g 命令来进行运行: sudo -u cockpit-ws -g co ...
- Linux-3.14.12内存管理笔记【伙伴管理算法(2)】
前面已经分析了linux内存管理算法(伙伴管理算法)的准备工作. 具体的算法初始化则回到start_kernel()函数接着往下走,下一个函数是mm_init(): [file:/init/main. ...
- 两个list合并成一个list的操作
addAll 添加另一集合里面的元素 add 添加整个集合包括 [] Stream 操作 合并两个lis 出自http://www.it1352.com/963663.html public cl ...
- java8-05-再探函数式接口
1.自定义函数式接口 MyFun 传入一个参数 返回一个参数
- java异常处理机制详解
java异常处理机制详解 程序很难做到完美,不免有各种各样的异常.比如程序本身有bug,比如程序打印时打印机没有纸了,比如内存不足.为了解决这些异常,我们需要知道异常发生的原因.对于一些常见的异常,我 ...
- 小程序-引用的两种方式:import和include
import import可以在该文件中使用目标文件定义的template,如: 在mine.wxml中定义了一个叫item的template: <template name="ite ...
- super()方法详解
目录 一.单独调用父类的方法 二.super() 方法基本概念 2.1 描述 2.2 语法 2.3 单继承使用super() 2.4 多继承使用super() 三.注意事项 四.练习 一.单独调用父类 ...