강인규 블로그

0%

Top버튼 만들기

작성일 Edited on In Disqus:

서론

웹 사이트 글을 읽다보면 너무 긴 페이지에 위로 가기가 불편합니다. 홈페이지나 블로그 아래에 맨 위로 버튼을 만들어 놓으면 무척이나 편합니다. 간단히 만드는 방법에 대해 알아 봅시다.
참고로 새로운것은 아니구요. 기존의 인터넷에 있는것을 모아 보았습니다.

1. 간단히 텍스트로 만들기(html)

간단하게 먼저 시작 하겠습니다.
html의 a태그를 이용 만들어 보겠습니다.

1
2
3
4
5
6
<body>
<a name="Top"></a>

...

<a href="#Top">TOP</a>

위의 것은 a태그 name을 이용 Top버튼 만들기 입니다.

id를 이용해도 됩니다.

1
2
3
4
5
<body id="pageTop">

...

<a href="#pageTop">TOP</a>

위에 처럼 a태그의 name를 이용할 필요없이 선택자인 id를 이용 해도 됩니다.

1
<a href="#">TOP</a>

위치 하고 상관없이 처음으로 가기는 #만 하셔도 됩니다. (#top도 됩니다.)

밑의 예제를 참조.

위치 지정 버튼(간단)

이 부분은 인터넷에 많은 소스들이 있습니다. 그중에 html로만 만들수 있게 초 간단 부분입니다.

1
2
3
<a style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title=”top">TOP</a>
</body>
</html>

a태그에 스타일(style)문을 사용 좌측하단에 스크롤과 관계 없이 고정 되게 되어 있습니다.

설명

position:fixed; - 화면 고정(fixed)
bottom:10px; - 밑에서 부터의 거리
right:5px; - 오른쪽 부터의 거리

고정은 그대로 놔두고 위의 bottom과 right부분을 조정하여 위치도 변경 가능합니다.
또한 되도록이면 보기 좋게 html소스의 마지막에 위치 시키면 관리가 편리합니다.

덤 (이미지 넣기)

텍스트 대신 이미지를 넣으셔도 됩니다.

1
<a style="..." href="#"><img src="이미지 주소"></a>

2. 주소 뒤 ‘#’ 안 붙게 만들기

스타일 부분 (공통)

1
.topBtn {cursor:pointer;}

html 부분

1
2
3
4
5
6
7
8
9
<div class=topBtn onclick="window.scrollTo(0,0);">TOP</div>

or

<span class=topBtn onclick="window.scrollTo(0,0);">TOP</span>

or

<a href="javascript:window.scrollTo(0,0);">TOP</a>

위의 3개중 하나 만 써도 됩니다.

설명

cursor:pointer : 마우스 커서를 손가락 모양으로 변경해 주는 스크립트
onclick : 클릭시
window.scrollTo 를 사용해서 (x,y) 를 (0,0) 으로 이동 시켜 주는 스크립트.
나머지는 위에 중복

밑의 예제 참조

3. 조금 복잡하게 만들기(Html/Css/JQuery)

위의 것은 간단하게 만드는 부분이고 이제부터 조금 스무스하게 올라가는 버튼을 만들려고 합니다. JQuery문을 사용하여 만드는 방법입니다. 지금 이 블로그에 약간 변형해서 사용 중입니다.

일단 jQuery를 문서에 삽입합니다.

1
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

html 부분

1
<a id="topBtn" href="#">TOP</a>

스타일 부분

1
2
3
4
5
6
7
a#topBtn&nbsp;{
   position: fixed;   /* 포지션 고정 */
   right: 2%;         /* 오른쪽에서 2% - %도 할수 있음*/
   bottom: 5px;       /* 밑에서 5px */
   display: none;     /* 보여지지 없음 - 기본적으로  안보여지게 */
   z-index: 9999;     /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */
}

jQuery 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
	// 보이기 | 숨기기
	$(window).scroll(function() {
	  if ($(this).scrollTop() > 250) { //250 넘으면 버튼이 보여짐니다.
	        $('#topBtn').fadeIn();
	        } else {
	        $('#topBtn').fadeOut();
	  }
	});
	// 버튼 클릭시
	$("#topBtn").click(function() {   
	$('html, body').animate({
	 scrollTop : 0    // 0 까지 animation 이동합니다.
	}, 400);          // 속도 400
	return false;
	});
});

밑의 예제 참조

4. top버튼 특정 위치에 나타나기

.offset() 함수를 이용하겠습니다. 설명은 : http://api.jquery.com/offset/
offset함수는 밑에서 높이가 없어서 css에 넣습니다.

스타일 부분

1
2
3
4
5
6
#toTop{
   position: fixed;   /* 포지션 고정 */
   bottom: 100px;     /* 밑에서 100px */
   display: none;     /* 보여지지 없음 - 기본적으로  안보여지게 */
   z-index: 9999;     /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */
}

jQuery 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
  // 보이기 | 숨기기
  $(window).scroll(function() {
     if ($(this).scrollTop() > 250) { //250 넘으면 버튼이 보여짐니다.
           $('#toTop').fadeIn();
           $('#toTop').css('left', $('#sidebar').offset().left);  // #sidebar left:0 죄표
           } else {
           $('#toTop').fadeOut();
     }
  });
  // 버튼 클릭시
  $("#toTop").click(function() {   
  $('html, body').animate({
    scrollTop : 0    // 0 까지 animation 이동합니다.
   }, 400);          // 속도 400
   return false;
   });
 });

밑의 예제 참조