[CSS：jQuery] 부드럽게 "TOP에 돌아가기" 버튼을 만드는 방법

지금 보이는 화면 한 페이지를 가볍게 넘는 긴 HTML 문서를 아래로 스크롤하면서 보다가, 처음의 제일 위 화면으로 돌아 싶을 때 마우스 가운데의 휠을 움직여 페이지를 스크롤하는 것은 상당히 귀찮은 일입니다.

그럴 때 사용되는 것이 페이지의 "TOP에 돌아 가기" 버튼 기능입니다. 이것은 마우스로 HTML 페이지를 아래로 스크롤할 때, 화면 오른쪽 하단에 위쪽 화살표가 나오고 그것을 누르면 단번에 맨 위로 이동합니다.

페이지의 TOP로 돌아 싶을 때 매우 유용합니다.

그 기능을 만들기 위해서는 HTML과 CSS, 스크립트 jQuery가 각각 필요합니다.

여기에서 사용하는 ID 클래스 이름 (#gobacktotop)은 원하는 이름으로 바꿔줘도 상관 없습니다.

CSS

  <style>  
 #gobacktotop {
　　cursor : pointer;
　　display : none;
　　margin : 0% 0% 0% 90%;  /*오른쪽 아래의 이미지 위치*/
　　position : fixed;
　　bottom : 20px;
　　font-size : 90%;
　　padding : 10px;
　　width : 30px;
　　height : 30px;
　　text-align : center;
　　background-color : #000;
　　border-radius : 8px;
　　-webkit-border-radius : 8px;
　　-moz-border-radius : 8px;
　　filter : alpha(opacity=30);
　　-khtml-opacity : 0.6;
　　-moz-opacity : 0.6;
　　opacity : 0.6;
　　color : #FFF;
　　font-size : 11px;
　　z-index : 1000;
　}

 #gobacktotop:hover{
　　filter : alpha(opacity=90);
　　-khtml-opacity : 0.9;
　　-moz-opacity : 0.9;
　　opacity : 0.9;
　}
  </style>

스폰서 링크

Font Awesome CSS

이번 예제에서, "Top에 돌아가기" 버튼으로 표시하고 있는 "화살표"는 이미지가 아닌 텍스트 글꼴인 'Font Awesome'을 사용하고 있기 때문에, CSS와의 연결이 필요합니다.

별도로 다른 이미지를 사용하는 경우에는, 이 CSS는 필요하지 않습니다.

관련 기사

Font Awesome Icon을 사용하여 홈페이지를 디자인하기

 <style>  
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 </style>

HTML

화살표는 "Font Awesome"을 사용하고 있습니다.

 <body>  
    <div id="gobacktotop">
       <i class="fa fa-arrow-circle-o-up fa-3x"></i>
    </div>
 </body>

javascript・jQuery

마지막으로 웹 브라우저의 JavaScript 라이브러리인 jQuery를 사용하면, 주요 브라우저에서 이러한 기능을 쉽게 구현할 수 있습니다.


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascriptt">
  
 <script type="text/javascript">
$(function() {
 $(window).scroll(function() {
  if($(this).scrollTop() != 0) {
   $('#gobacktotop').fadeIn(); 
  } else {
   $('#gobacktotop').fadeOut();
  }
 });
 
 $('#gobacktotop').click(function() {
  $('body,html').animate({scrollTop:0},800);
 }); 
});
 </script>
 </body>

▼　이하의 오른쪽의 스크롤 바를 아래로 내려보십시오. 오른쪽 하단에 "Top에 돌아가기" 버튼이 표시될 것입니다.

스폰서 링크