Dig & Dig

📚 [Jekyll] Top 버튼 만들기

Category: Jekyll | 📅 October 06, 2021

• 준비물
• ID 확인 하기
• CSS 파일 추가
• Footer 에 버튼 추가

준비물

• 이동할 div의 id
• css 파일
• 🔝 버튼 추가

ID 확인 하기

버튼이 클릭 되었을 때 이동할 <div id = 'xxx' >를 확인 한다.
여기서는 xxx 로 하겠음.

CSS 파일 추가

scss 나 css 모두 큰 차이는 없으므로 .. 작업하기 편한 곳에 추가함. Jekyll 사이트를 뜯어고치는 경우면 Footer에 해당하는 css에 추가하는 것이 좋다.

.backtotop {
    position: fixed; /* 위치 고정 */
    bottom: 1.5em;   /* 밑에서 1.5 em 만큼 올라옴 */
    right: 1.5em;    /* 오른쪽에서 1.5 em 만큼 좌측으로 이동 */
    z-index: 10;     /* 본문에 상관없이 최 상단에 위치시킴 */
    font-size: 2em;  /* 버튼 크기 */
}

클래스를 backtotop으로 했으므로, Footer에 기록될 DIV 의 class 도 역시 backtotop 이 되어야 함.

Footer 에 버튼 추가

적당한 위치에 아래 내용을 추가 함.

    <aside class="backtotop">
        <a href="#top"> 🔝</a>
    </aside>