jQuery 강좌 | Plugins > Smooth Scroll - 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인

하나의 HTML 문서 안에서 위 또는 아래의 특정 위치로 이동하는 링크를 만들 수 있습니다. 문서가 길 때 주로 사용하게 되죠.

문서 내부의 링크를 클릭하면 링크에서 설정한 위치로 바로 이동합니다.

바로 이동하지 않고 스르륵 스크롤되면서 이동하여 시각적으로 보기 좋게 만들어주는 jQuery 플러그인이 Smooth Scroll입니다.

https://github.com/kswedberg/jquery-smooth-scroll

사용법은 다음과 같습니다.

$( 'a' ).smoothScroll();

a에 id나 class 등 선택자를 추가하여 특정 링크에서만 작동하게 할 수도 있습니다.

또한 옵션을 이용해서 이동 속도를 조절하거나 이동 전 또는 후에 특정 함수를 실행시킬 수도 있습니다.

자세한 옵션 설명은 다음의 링크에 있습니다.

https://github.com/kswedberg/jquery-smooth-scroll#options

예제

http://book.cmsfactory.net/jQuery/V01/Plugins/smooth-scroll/smooth-scroll-01.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Plugin | Smooth Scroll</title>
    <style>
      body {
        width: 200px;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="jquery.smooth-scroll.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'a.ss' ).smoothScroll();
      } );
    </script>
  </head>
  <body>
    <h1 id="id0">Top</h1>
    <p><a href="#id1" class="ss">Goto ID 1</a></p>
    <p><a href="#id2" class="ss">Goto ID 2</a></p>
    <p><a href="#id3" class="ss">Goto ID 3</a></p>
    <p><a href="#id4" class="ss">Goto ID 4</a></p>
    <p id="id1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
    <p><a href="#id0" class="ss">Back to Top</a></p>
    <p id="id2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
    <p><a href="#id0" class="ss">Back to Top</a></p>
    <p id="id3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
    <p><a href="#id0" class="ss">Back to Top</a></p>
    <p id="id4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
    <p><a href="#id0" class="ss">Back to Top</a></p>
  </body>
</html>

Category

이 글을 공유하기

Kakao

Book navigation