html과 css만으로 top 이동 버튼 추가하기

다른 팀들의 발표를 보고 나도 버튼 누르면 최상단으로 이동해주는 top 버튼을 구현해보고 싶어졌다. 근데 구글링 해보니 대부분의 게시물에서는 자바스크립트를 이용하는데 나는 아직 자바스크립트를 이용해 본 적이 없기 때문에 조금 두려웠다. 그래서 html만으로 구현할 수 있는 방법이 없을까 열심히 검색하고 시도해 보다가 결국에는 성공했다!

참고 사이트
https://miaow-miaow.tistory.com/84

결과물 뿌듯

일단 내 웹페이지는 굉장히 간단한 구조이기 때문에 더 복잡한 코드에서도 적용될지는 모르겠다는 점을 밝혀둔다.

1. top 버튼 눌렀을 때 이동하고 싶은 위치를 id="top"으로 설정한다. 나는 타이틀에 id 값을 설정해 줬다.

<div class="mytitle" id="top">

2. html 코드 최하단에 a 태그를 추가한다. a 태그에 버튼 눌렀을 때 이동할 위치를 넣어주는 것입니다. a href="#top"
이미지는 구글에 top button png 검색해서 가져왔어요.

<a href="#top"><img src="https://www.pngfind.com/pngs/m/383-3837846_up-arrow-icon-top-move-to-top-button.png"></a>

3. 버튼 이미지의 css를 설정한다. 이건 취향대로.. 그리고 우측 하단에 이미지를 고정하기 위해서 부모 요소(downbar)에 position: relative;를 설정하고 자식 요소(img)에 position: absolute;를 설정해서 right, bottom 값을 고정했다.

.downbar > a > img{
    height: 35px;
    width: 35px;
    border-radius: 140px;

    position: absolute;
    right: 40px;
    bottom: 40px;
}

하나 더 알게 된 사실
position: fixed로 수정하면 버튼 이미지가 최하단에만 고정되는 게 아니고 계속 따라다닌다.