HTML로 맨 위로 이동 버튼 만들기

맨 위로 이동 버튼은 긴 글의 상단 이동을 편하게 해주는 유용한 기능입니다. 하지만 티스토리나 워드프레스는 경우에 따라 기능을 따로 추가해야 할 수 있습니다. 이 포스팅에서는 코딩을 잘 몰라도 쉽게 추가할 수 있는 only [HTML 코드] 버전, CSS를 따로 관리할 수 있는 [CSS 분리] 버전, 마지막으로 유용한 이동 플러그인을 정리했습니다.




HTML만 사용한 버전

1
2
3
4
5
<a style=“position:fixed; bottom:15px; right:15px; width:40px; height:40px; z-index:1; opacity:0.8;” href=“#”>
 
<img src=“이미지URL”/>
 
</a>
cs

1 – 아이콘 클릭(터치) 시 이동할 위치 지정.
3 – 이미지의 위치 지정

bottom, right – 아이콘이 바닥과 오른쪽 벽에서 띄어지는 넓이 지정.
width, height – 아이콘의 크기를 지정.
z-index – 여러 요소가 겹쳐질 때 상단에 놓을 수 있음.
opacity – 이미지를 자체를 투명하게 만들 필요 없이 투명도 조절.
href – 이동할 위치 지정.



CSS를 분리한 버전

1
2
3
4
5
<a class=“topbutton” href=“#”>
 
<img src=“이미지URL”/>
 
</a>
cs

1
2
3
4
.topbutton{
    position:fixed; bottom:15px; right:15px; width:40px; height:40px; z-index:1; opacity:0.8;
}
cs


<a>에 클래스를 만든 후 동명의 CSS를 작성해 연동합니다. CSS 코드를 HTML 페이지에 작성한다면 <style></style>로 감싸주세요.



맨 위로 이동 플러그인

제가 사용하고 있는 워드프레스 플러그인은 “ToTop“입니다. 장점은 [일정 픽셀 이상 스크롤 후 보이는 기능], [일정 대기시간 후 숨겨지는 기능], [부드러운 이동 효과] 등 여러 설정을 할 수 있습니다. 그 외 사용 중인 다른 플러그인 정보는 “블로그에 사용 중인 워드프레스 플러그인 추천 및 소개“를 참조해 주세요.



관련글

guest
0 Comments
Inline Feedbacks
모든 댓글 보기