티스토리 블로그 : 위로 올라가는 버튼 만들기

본문 들어가기 전에 반드시 jQuery를 넣어주세요

아래 스크립트를 스킨편집(HTML)의 </head> 바로 앞에 추가합니다

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

 

글이 길어지면 맨 아래쪽에서 맨 위쪽으로 이동하기 위해 품이 든다고 생각합니다.

마우스 스크롤을 계속 돌리든, 화면 스크롤바를 움직여줘야 하니까요.

이러한 상황에서 화면 한 구석에 "위로 가기 버튼"이 있다면 참 편리하겠죠?

이번 포스트에서는 그러한 역할을 하는 버튼을 만들어보겠습니다.

 

위로 가기 버튼을 만드는 방식은 2가지가 있습니다.

하나는 html과 css로 간단하게 만들기, 둘은 jQuery까지 사용해 간지나게 만들기.

 

우선 html과 css로 간단하게 만드는 방법입니다.

① 스킨편집(파일업로드)에 아래 파일을 추가해주세요.

(커스텀할 경우 다른 이미지로 대체거나 생략하여도 OK)

up-arrow.png

0.02MB

 

② 아래 코드를 스킨편집(HTML)의 <s_t3> 바로 뒤에 붙여넣어주세요.

<div class="upBtn"><a href="#"><img src="./images/up-arrow.png" alt="위로"></a></div>

커스텀할 경우 이미지 태그의 src 부분을 적합한 링크 주소로 변경해야 합니다.

텍스트로만 버튼을 구성하려고 할 경우에는 img 태그를 지우고, 텍스트를 적으면 됩니다.

 

③ 아래 코드를 스킨편집(CSS)의 맨 마지막에 붙여넣어주세요.

.upBtn{
	display: inline-block;
	background-color: black; /* 버튼 배경색 */
	padding: 10px; /* 버튼 여백 */
	border-radius: 10px; /* 버튼 둥글기 */
	position: fixed;
	bottom: 50px; /* 버튼 아래 위치 */
	right: 50px; /* 버튼 오른쪽 위치 */
	z-index: 99;
}
.upBtn img{
	width: 30px; /* 버튼 이미지 크기 */
}

버튼 위치를 조정하려 할 경우 bottom 속성과 right 속성을 지우고, 아래 속성을 붙여넣어주세요.

왼쪽위 left: 50px; top: 50px;

오른쪽위 right: 50px; top: 50px;

오른쪽아래 right: 50px; bottom: 50px;

속성값인 50px은 버튼이 화면의 가장자리에서 얼만큼 떨어져 있는 지를 알려줍니다.

속성값을 변경하면, 가장자리에서 그만큼 멀어지거나 가까워집니다.

 

④ 스킨편집을 저장하고 끝!

 

이어서 html과 css, 그리고 jQuery를 사용해 간지나게 만드는 방법입니다.

본 방법에서 알아야 할 메서드는 .animate()로, 애니메이션 효과를 만드는 역할을 합니다.

① "간단하게 만들기"의 ①, ②, ③을 모두합니다.

 

② 아래 코드를 스킨편집(HTML)의 </s_t3> 바로 앞에 붙여넣어주세요.

<script>
$(function() {
	$('.upBtn').click(function() {
		$('html, body').animate({scrollTop : 0 }, 400); /* 400(보통)의 속도로 위로 올라가기 */
		return false;
	});
});
</script>

 

③ 스킨편집을 저장하고 끝!

 

↓ 각 위로가기 버튼의 결과물 (result를 누르면 나옵니다) ↓

간단하게 만들기	간지나게 만들기
See the Pen 간단하게 만들기 by 베 🏳️‍🌈 (@bae020959) on CodePen.
See the Pen 간지나게 만들기 by 베 🏳️‍🌈 (@bae020959) on CodePen.