在使用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界面跳转,滚动到顶部的更多相关文章

  1. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  2. 如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter

    PS 感谢大家的关注,由于我本想开源4个库,除了router, 另外三个分别是native dispatcher, web dispatcher 和 react dispatcher , 所以rout ...

  3. iframe内点击a标签禁止滚动到顶部

    在iframe内加载的表中,操作下的按钮用a标签布局,但是会出现一个非常不好的体验,就是当页面有滚动条的时候,点击a标签,列表会自动滚动到顶部. 首先看我的a标签: <a href=" ...

  4. scrollTop如何实现click后页面过渡滚动到顶部

    用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...

  5. Android ScrollView 滚动到顶部

    有时候使用ScrollView,里边控件比较多的时候,打开界面,会滑到底部,如果要设置滑动到顶部,一般有两种方法 1.使用fullScrol(),scrollView.fullScroll(Scrol ...

  6. Android 手机卫士--设置界面&功能列表界面跳转逻辑处理

    在<Android 手机卫士--md5加密过程>中已经实现了加密类,这里接着实现手机防盗功能 本文地址:http://www.cnblogs.com/wuyudong/p/5941959. ...

  7. iOS界面跳转的一些优化方案

    原文地址: http://blog.startry.com/2016/02/14/Think-Of-UIViewController-Switch/ iOS界面跳转的一些优化方案 App应用程序开发, ...

  8. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  9. Android activity界面跳转动画

    实现activity界面跳转动画 1.在startActivity方法之后加入: overridePendingTransition(R.anim.pull_in_right, R.anim.pull ...

随机推荐

  1. SQL Server存储过程数据库日志文件备份的脚本-干货

    还是拿数据库AAAAAAAA为例子        CREATE PROC [dbo].[p_log_backupAAAAAAAA]    @dbname sysname='',             ...

  2. EXPDP导数报ORA-00942案例

    使用数据泵(expdp)导数时遇到了ORA-31626 & ORA-00942 错误,数据库版本为Oracle Database 10g Release 10.2.0.5.0,具体错误如下所示 ...

  3. 服务器安装neo4j

    neo4j是目前最流行的图形数据库,支持完整的事务.在树形图中,图是有顶点.边和属性组成的,顶点和边都可以设置属性,顶点又称节点,边也叫做关系.每个节点和关系都可以有一个或多个属性,neo4j创建的图 ...

  4. 以特定用户和组来执行某个程序 - linux

    运行cockpit 服务时,我们指定运行此程序的用户和组:cockpit-ws cockpit-ws 我们使用 sudo -u -g 命令来进行运行: sudo -u cockpit-ws -g co ...

  5. Linux-3.14.12内存管理笔记【伙伴管理算法(2)】

    前面已经分析了linux内存管理算法(伙伴管理算法)的准备工作. 具体的算法初始化则回到start_kernel()函数接着往下走,下一个函数是mm_init(): [file:/init/main. ...

  6. 两个list合并成一个list的操作

    addAll  添加另一集合里面的元素 add 添加整个集合包括 [] Stream 操作 合并两个lis  出自http://www.it1352.com/963663.html public cl ...

  7. java8-05-再探函数式接口

      1.自定义函数式接口  MyFun      传入一个参数    返回一个参数

  8. java异常处理机制详解

    java异常处理机制详解 程序很难做到完美,不免有各种各样的异常.比如程序本身有bug,比如程序打印时打印机没有纸了,比如内存不足.为了解决这些异常,我们需要知道异常发生的原因.对于一些常见的异常,我 ...

  9. 小程序-引用的两种方式:import和include

    import import可以在该文件中使用目标文件定义的template,如: 在mine.wxml中定义了一个叫item的template: <template name="ite ...

  10. super()方法详解

    目录 一.单独调用父类的方法 二.super() 方法基本概念 2.1 描述 2.2 语法 2.3 单继承使用super() 2.4 多继承使用super() 三.注意事项 四.练习 一.单独调用父类 ...