부드러운 화면이동 하는 방법 Smooth Scroll

게시자: 대문 demun 카테고리: 퍼블리셔/jQuery 2014.05.27 06:00

블로그를 하다보면 부드러운 화면이동을 하고 싶을 때가 있습니다.
특히나 긴글일경우 스크롤을 하기가 부담스럽죠. 


또 글이 길거나 차례같은것이 있어서 클릭하면 원하는 위치로 이동을 하고 싶을때가 있습니다.

기존의 스크롤을 해주는 플러그인들은 복잡한 설정법이라든가 스타일이 많이 들어가 있다든가 하는것이 대부분인데요. 오늘 소개하는것은 아주 간단합니다.


저만 잘 따라오시면 html, css, javascript 를 몰라도 누구나 따라할 수 있습니다.
초보자들도 따라할 수 있도록 쉽게 설명해드리겠습니다.


먼저 홈페이지를 소개합니다.
Smooth Scroll -> https://github.com/cferdinandi/smooth-scroll

데모페이지 ->http://cferdinandi.github.io/smooth-scroll/


데모페이지에 갈 필요도 없습니다. 눌러보세요

현재 제 블로그에 적용이 되어있을겁니다. 만약 시간이 지나서 없을때는 데모페이지를 참고하세요.


순서는 이렇습니다.

  1. 플러그인 업로드
  2. html 삽입
  3. 자바스크립트 삽입


자 가볼까요...

Smooth Scroll 플러그인 삽입

위의 홈페이지에 방문하셔도 되고 현재 아래에서 다운로드 해도 됩니다.


smooth-scroll.js



플러그인을 티스토리 관리자화면에서 html/css 편집 -> 파일업로드 ->추가해서 smooth-scroll.js 를 업로드합니다.





html 삽입

먼저 가장 많이 사용하는것이 바로 하단에 내려갔을때 상단으로 쯕 ~~ 올라가는것을 많이 하죠. 

이것을 예로 들어보겠습니다.

제 경우에 블로그 하단에 보면 위로 올라가는 아이콘에 보이는데요. 똑같이 할 필요는 없구요. 그냥 링크만 하나 생성해주세요.
형식은 아래와 같습니다.

<a href="#header" data-scroll>Top</a>

여기서 #header 이라고 하는것은 목적지 입니다.
아이디가 header 이라고 있어야 합니다. 난 모르겠다 하시면 body 태그 다음에 오는 div 에 아이디를 사용하시면 됩니다. 만약 id 가 없으면 하나 만들어도 됩니다.
그리고 data-scroll 도 있지마세요.


아래 이미지를 참고하세요. 저의 경우 body 아래에 container 또는 header 이 있지요. 

여러분들도 잘 찾아보세요. 

바로 그걸 적는것입니다.





자바스크립트 삽입

html 맨 아래쪽에 가시면 body 태그위에 자바스크립트를 넣어줍니다.
아래는 예시 입니다.

<script type="text/javascript">
    smoothScroll.init();
</script>
</body>

어때요 간단하죠!!
만약 다른 스크립트가 있다면 그곳에 삽입해도 됩니다. 이런식으로 삽입하면 되구요. 다른 형식으로도 움직이게끔 설정할 수도 있습니다. 그것은 홈페이지를 참고하세요.


다시 눌러요


신고

댓글