react介面跳轉，滾動到頂部

在使用react-router-dom時，我們經常會遇到路由切換時滾動到瀏覽器頂部的問題。

很多時候我們需要的是滾動到頂部「scroll to top」，因為發現好像所有的單頁面都有乙個通病，就是頁面進行跳轉時，當前所在的位置和你上個介面所在的位置一樣，顯然這樣對於使用者來說體驗不是很好。

我們可以使用使用乙個元件來幫助我們每次導航到乙個頁面的時候，滾動到頂部。確保使用withrouter包裹它，以傳遞route的屬性props

import react,  from 'react';

import from 'react-router-dom'import 'moment/locale/zh-cn';
class scrolltotop extends component 
}render() 
}export 
default withrouter(scrolltotop);

import react from 'react';

import reactdom from 'react-dom';
import 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'
document.getelementbyid('root'));
reactdom.render(
, document.getelementbyid('root'));
serviceworker.unregister();

注：這個方法在頁面跳轉過程中非常有用，但是對於那種介面上有分頁有很長的介面，每點選跳轉一頁的時候，介面位置還是在原來的位置，這個時候我們可以自己寫乙個元件，在介面中import backtop from '......'的componentdidmount()中引用就可以了。

export function

backtop()
}

頁面滾動到頂部的方法

前面用了乙個方法來讓頁面滾動到頂部，window.scrollto window.scrolltp 這個方法在chrome高版本瀏覽器是沒有問題的，但是對於低版本的瀏覽器來說是有問題的，低版本瀏覽器，比如說chrome49,用法就是 window.scrollto 0,0 所以換成了其他方法 方法一...

js平滑滾動到頂部,底部,指定地方

採用錨點進行頁面中的跳轉的確很方便，但是要想增加網頁的效果，可以使用jquery中的animate，實現滾動的乙個動作，慢慢的滾動到你想跳轉到的位置，從而看起來會非常高大上。滾動到頂部 scroll top click function 800 滾動到指定位置 scroll a click func...

使用jQuery滾動到頂部（設定時間 2分鐘）

這是逐步為您的 設定頂部滾動的快速步驟。對於演示，只需在該站點上向下滾動即可。只是一些jquery，可以在使用者向下滾動時顯示影象，在使用者向上滾動時隱藏影象，並處理click事件。document ready function else scrolltop.bind click function ...