Ant-design: Backtop ๋Œ€์ƒ์ด ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 06์›” 05์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ant-design/ant-design

๋ฒ„์ „

2.10.4

ํ™˜๊ฒฝ

๋งฅ ์˜ฅ์Šค 10.11.6, ํฌ๋กฌ 58.0.3029.110, antd 2.10.4

์žฌ์ƒ์‚ฐ ๋งํฌ

https://codepen.io/cnchore/pen/KqwNjr

์žฌํ˜„ ๋‹จ๊ณ„

  1. ๋ฐฑํƒ‘ ํƒ€๊ฒŸ ๋ฐ”์ธ๋“œ div;
  2. div๋ฅผ ์Šคํฌ๋กคํ•˜๋ฉด ๋ฐฑํƒ‘์ด ๋ณด์ž…๋‹ˆ๋‹ค. ๋งจ ์œ„๋กœ ๋Œ์•„๊ฐ€๋ ค๋ฉด ํด๋ฆญํ•˜์„ธ์š”.

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

div๋ฅผ ์Šคํฌ๋กคํ•˜๋ฉด ๋ฐฑํƒ‘์ด ๋ณด์ž…๋‹ˆ๋‹ค. ๋งจ ์œ„๋กœ ๋Œ์•„๊ฐ€๋ ค๋ฉด ํด๋ฆญํ•˜์„ธ์š”.

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์Šคํฌ๋กค div, ๋ฐฑํ†ฑ์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Œ

๋ชจ๋“  3 ๋Œ“๊ธ€

์ฝ”๋“œํŽœ์˜ div ๋Š” ์Šคํฌ๋กคํ•  ์ˆ˜๋„ ์—†์Šต๋‹ˆ๋‹ค!

https://codepen.io/anon/pen/yXyZqq?editors=0010

๋ฐ˜์‘ 15 ์—…๋ฐ์ดํŠธ 16.1.0

<BackToptarget={() => document.getElementById('backTop')}> <div> <Icon type="arrow-up" className='backTop' /> </div> </BackTop>
๊ฒฝ๊ณ : target ์˜ ์†Œํ’ˆ ๊ฐ’์ด ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๊ผฌ๋ฆฌํ‘œ. ์š”์†Œ์—์„œ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ๋ฌธ์ž์—ด ๋˜๋Š” ์ˆซ์ž ๊ฐ’์„ ์ „๋‹ฌํ•˜์—ฌ DOM์— ์œ ์ง€ํ•˜์‹ญ์‹œ์˜ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ https://fb.me/react-attribute-behavior ๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.
div์—์„œ(BackTop์—์„œ ์ƒ์„ฑ)
AnimateChild(Animate์—์„œ ์ƒ์„ฑ)
Animate์—์„œ(BackTop์—์„œ ์ƒ์„ฑ)
BackTop์—์„œ (์ œํ’ˆ์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
div์—์„œ (BasicLayout์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
BasicLayout์—์„œ (Adapter์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
์–ด๋Œ‘ํ„ฐ(์ œํ’ˆ์—์„œ ์ƒ์„ฑ)
์ œํ’ˆ์—์„œ
์•Œ ์ˆ˜ ์—†์Œ(Form(WrappedComponent)์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
Form(WrappedComponent)์—์„œ (RouterContext์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
div์—์„œ (BasicLayout์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
BasicLayout์—์„œ (Adapter์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
์–ด๋Œ‘ํ„ฐ(FirstPage์—์„œ ์ƒ์„ฑ)
div์—์„œ (BasicLayout์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
BasicLayout์—์„œ (Adapter์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
์–ด๋Œ‘ํ„ฐ(FirstPage์—์„œ ์ƒ์„ฑ)
div์—์„œ(FirstPage์—์„œ ์ƒ์„ฑ)
FirstPage์—์„œ (Connect(FirstPage)์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
Connect(FirstPage)์—์„œ (RouterContext์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
RouterContext์—์„œ (๋ผ์šฐํ„ฐ์— ์˜ํ•ด ์ƒ์„ฑ๋จ)
๋ผ์šฐํ„ฐ์—์„œ
์ œ๊ณต์ž์—์„œ

๋ฌด์Šจ ์ผ์ด์•ผ?

๊ฐ™์€ ๊ฒฝ๊ณ ๋ฅผ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค
image

target ๋Š” ๊ณ ๊ฐ ์†์„ฑ ๋ช…๋ช… ๊ทœ์น™์— ๋” ์ž˜ ๋งž๋„๋ก data-target ๋กœ ์ด๋ฆ„์„ ๋ฐ”๊ฟ”์•ผ ํ•ฉ๋‹ˆ๋‹ค.
๊ตฌ์„ฑ ์š”์†Œ๋Š” ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€๋งŒ

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰