https://www.npmjs.com/package/react-scroll
A scroll component for React.js
① react-scroll 설치
npm install --save react-scroll
② src/components/Main/Main.js
먼저 페이지를 하나 만들어서 이동할 영역 Middle과 클릭 시 Middle 영역으로 이동하게 할 Side 영역으로 나눠준다
import React from "react" import styled from "styled-components" import Middle from "./Sections/Middle" import Side from "./Sections/Side" const MainDiv = styled.div` margin: 3rem 5rem; ` const ContentDiv = styled.div` width: 100%; display: flex; ` const Main = () => { return ( <MainDiv> <ContentDiv> <Middle /> <Side /> </ContentDiv> </MainDiv> ) } export default Main
③ src/components/Main/Sections/Side.js
import React from "react" import styled from "styled-components" import { Link } from "react-scroll" const SideDiv = styled.div` width: 10%; position: fixed; right: 5rem; margin-top: 70px; div { display: flex; flex-direction: column; } ` const Side = () => { return ( <SideDiv> <div> <Link to="1" spy={true} smooth={true}> <span>Day 1</span> </Link> <Link to="2" spy={true} smooth={true}> <span>Day 2</span> </Link> <Link to="3" spy={true} smooth={true}> <span>Day 3</span> </Link> <Link to="4" spy={true} smooth={true}> <span>Day 4</span> </Link> </div> </SideDiv> ) } export default Side
④ src/components/Main/Sections/Middle.js
import React from "react" import styled from "styled-components" const MiddleDiv = styled.div` div { height: 500px; } ` const Middle = () => { return ( <MiddleDiv> <div id="1"> <h2>day 1</h2> <p>content</p> </div> <div id="2"> <h2>day 2</h2> <p>content</p> </div> <div id="3"> <h2>day 3</h2> <p>content</p> </div> <div id="4"> <h2>day 4</h2> <p>content</p> </div> </MiddleDiv> ) } export default Middle
이렇게 오른쪽 사이드에 생성한 Day 1~Day 4 텍스트를 클릭하면
왼쪽에 있는 해당 영역으로 잘 이동한다
출처 :
https://developer0809.tistory.com/138
댓글 ( 4)
댓글 남기기