反応-ルータ-DOMを使用している場合、私たちはしばしば、ブラウザの上部にルーティングスイッチを転がり問題が発生しました。

トップへスクロール上へスクロール

私たちが必要とする多くの場合、つまり、すべてが共通の問題を抱えている場合は、単一のページの発見以来、「上へスクロール」のトップにスクロールするときにジャンプページ、現在の場所と場所どここの当然のように最後のインターフェイスユーザーのために、経験は非常に良いではありません。

私たちは、一番上にスクロールし、たびにページをナビゲートするために私たちを助けるために、<ScrollToTop>コンポーネントの使用を使用することができます。必ず使用してください withRouterルートが小道具を属性渡すためにそれを包みます

インポートは、「反応」から、{コンポーネント}を反応させ; 
インポート{withRouter}   '反応ルータ-DOM' 
インポート 'モーメント/ロケール/ ZH-CN' 。
クラスScrollToTopは、コンポーネント{延び
    componentDidUpdate（prevProps）{ 
        場合（この！.props.location.pathname == prevProps.location.pathname）{ 
            window.scrollToは（ 0、0 ）; 
        } 
    } 

    {（）レンダリング
        を返す この.props.childrenと、
    } 
} 
エクスポートデフォルト withRouter（ScrollToTop）。

あなたのアプリの前に、ルータはそれをレンダリングした後、

インポートは「反応」からリアクト。
以下からの輸入ReactDOM '反応-DOM' ; 
インポート{BrowserRouter} '反応ルータ-DOM' ; 
以下からの輸入ルート「./router/Router」; 
インポート * './serviceWorker'からserviceWorkerとして; 
インポート」./index.css' ; 
インポート」./static/fonts/iconfont.css' ; 
輸入ScrollToTopから '../src/models/scrollToTop'
 // ReactDOM.render（<ルート/>、のdocument.getElementById（ 'ルート'））; 
ReactDOM.render（
     <BrowserRouter> 
        <ScrollToTop> 
        <
    </ BrowserRouter>、のdocument.getElementById（ 'ルート'））; 
serviceWorker.unregister（）;

注：このメソッドは、ジャンプページの方法に有用であるが、そこには、インタフェースの種類に長いインタフェースのためにページングされ、各1時間、インタフェースのか、元の位置での位置、我々は書くことができます。この時間をジャンプしますコンポーネント、インタフェースからインポートbackTop '......' componentDidMountの（）{backTop（）}これで参照。

エクスポート機能backTop（）{
         VAR currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        もし（currentScroll> 0 ）{
             // window.requestAnimationFrame（smoothscroll）。
            window.scrollToは（0,0 ）。
        } 
}

ジャンプトップにスクロールし、インターフェースを反応させます

トップへスクロール上へスクロール

おすすめ