TIL 25. ページ内の場所

に質問

私が担当している商品の詳細ページが長すぎます.一度だけ移動したい
また、ページを移動するときは、スクロールを上部に配置します.

ソリューション:scrollTo()

1. Syntax

window.scrollTo(xpos, ypos)

window.scrollTo ({top:으로부터 몇px, behavior: 'auto'});
//위 경우 css적 요소를 넣는것이므로 {}를 사용했다.
// behavior:smooth: The scrolling animates smoothly.
//behavior: auto The scrolling happens in a single jump.

2. window.scrollTo()

の位置決め関数をそれぞれ定義します.

生成された

関数は、各タブのonClickイベントに適用されます.

上部ボタン

3.ページ移動時の位置

このとき最も重要なのは、ライフサイクルを理解し、各ページが実行された後、私がどこにいるかを考えることです.

コンストラクション関数()->プレゼンテーション()->コンポーネントDidMount()で、ページのライフサイクルは

です.

ページ移動が終わったらページの上部にいたいのでwindow.コンポーネントDidMount()にscrollTop(0,0)を配置します.

参考資料

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

https://www.w3schools.com/jsref/met_win_scrollto.asp

問い合わせ:鐘浩宗浩さん