[jQuery] 앵커 태그 이동 시 부드러운 스크롤 효과

 

#1 기능 설명

  일반적으로 내비게이션 등의 앵커 태그(a) 등을 이용하여 동일 페이지에서 위치를 이동하게 될 때,

  해당 위치로 바로 이동해 버리지만 이 기능을 사용하게 되면 해당 위치로 이동할 때 화면을 스크롤하는듯한 애니메이션 효과를 주어 부드럽게 이동하게 됩니다.

 

 

#2 적용 및 사용 방법

  1. jQuery가 연결합니다.

  참고: 제이쿼리(jQuery) 설치하는 방법

 

  2.  scrollTo.js를 HTML 문서에 연결합니다.

 

  { 다운로드 방식 }

  다음 파일을 다운로드하여 HTML의 </head> 앞에 연결해 줍니다.

jquery.scrollTo.js

0.01MB

 

<!-- 연결 예 -->
<script src="images/jquery.scrollTo.js"></script>

 

  { CDN 방식 }

<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
<!-- 또는 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>

  

  3.  다음 코드를 </body> 위쪽에 삽입해 줍니다.

<script>
    $(function () {
        $('nav a').click(function (e) {               //링크를 클릭하면 실행
            $.scrollTo(this.hash || 0, 1500);	// 해시(#eu, #us, ...)가 있는 위치로 스크롤
            e.preventDefault();             // a 링크를 통해 이동하거나 창이 새로고침 되는것을 방지.
        });
    });
</script>

  3번째 줄의 'nav a' 항목을 원하는 요소로 지정해 주면, 해당 링크가 걸린 곳으로 이동할 때 스크롤이 흐르듯이 이동하게 됩니다.

  4번째 줄의 1500은 속도를 지정하는 것이니 원하는 속도로 변경해 주시면 됩니다. (숫자가 적을수록 빨라집니다)

 

 

#3 잡담

  사실 이거 기능 쓸려고 제이쿼리까지 가져오며 글을 써 봤습니다. 

  페이지 스크롤 효과를 사용하기 위해서 위에서 제이쿼리 가져오고, 플러그인 가져오고, 스크립트까지 써가며 설정했지만... 

  CSS에 다음 기능을 하나만 추가해주는 것으로 동일한 효과를 볼 수 있습니다.  

html { 
  scroll-behavior: smooth; 
}

  제이쿼리를 사용하던 위 내용과 비교하면 시간 조절이 안되고 브라우저에 정의되어있는 값으로 동작한다는 것인데...

  CSS에 넣다 보니 원하는 위치에서만 동작하게 하기도 쉽고 미디어 쿼리 등을 이용하여 특정 기계나 상황에서만 효과가 발생하도록 지정할 수도 있어 일반적인 상황에선 오히려 더 편리할 것입니다. 

 

  취향에 따라 필요한 것을 골라 사용하시는 것을 추천드립니다.