jQuery를 이용한 스크롤 이동하기 구현 방법

블로그 스크롤 Top으로 이동하기

 

 

 

jQuery가 나오기 전 JavaScript 로 이것 저것 열심히 구현하던 때가 생각 납니다.

자바스크립트로 구현을 하려다가 시대에 맞춰 편한 JQuery를 이용하여 

스크롤 이동하기 기능에 대하여 포스팅 해 봅니다.

 

jQuery를 이용하면 아주 아주 쉽게 기능을 구현 할 수 있습니다.

조금의 준비과정이 필요하지만요.

 

 

준비과정

 

jQuery 를 이용하기 위해서는 파일을 다운받아 업로드하고 경로를 선언해 주어야 합니다.

파일은 jQuery 사이트에서 다운 받을 수 있습니다.

 

JQury 사이트 바로가기 

 

 

 

다운을 받았다면 블로그에 파일을 업로드 해 줍니다.

그리고 HTML head부분에 다음과 같이 포함시켜주어야 합니다.

 

<script src="./images/jquery-3.3.1.min.js"></script>

 

이제 모든 준비가 완료 되었습니다.

 

이제 스크롤 이동하기 기능을 구현 해 보도록 하겠습니다.

 

 

구현하기

 

1. 먼저 스크립트 부분입니다.

 <script>
   function scroll_top(speed ) {
    $('html, body').animate({
           scrollTop: 0
       }, speed);

       return false;
   }
 </script>

 

scroll_top() 라는 함수를 선언하였습니다. 그리고 매개변수로 speed라는 값을 가지고 있습니다. 이 값은 이동 속도로 설정 됩니다. 1000 이면 1초에 해당 됩니다.

그리고 함수 내용부분에는 jQuery 에서 제공되는 animate함수를 사용 하였습니다. 이동할 스크롤 위치를 0으로 설정하고 이동 속도를 설정 합니다. 다른 설정값으로 효과를 줄 수도 있지만 별로 마음에 들지 않기에 깔끔하게 저기까지만 설정을 하도록 하겠습니다.

 

2. 화면 부분과 CSS 부분 입니다. div로 이전 포스팅에서 다루었던 내용을 그대로 사용하여 모양을 코딩하였습니다.

<div id="scroll_top" onclick="scroll_top(300)">Top</div>

 

#scroll_top {position:fixed; top:92%; font-family:'굴림', sans-serif; margin:0px 85px 0px;box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); padding:10px; z-index:99;background-color:#fff; cursor:pointer;}

 

div 영역을 클릭하면 위에 생성한 scroll_top 함수를 호출합니다. 그리고 파라미터로 300이란 값을 넘기게 됩니다.

즉 이동 시간을 0.3초로 설정하겠다라는 것입니다.

 

생각보다 아주 간단하죠. 모든 구현이 완료 되었습니다.