부드러운 화면이동 하는 방법 Smooth Scroll
- 퍼블리셔/jQuery
- 2014. 5. 27. 06:00
블로그를 하다보면 부드러운 화면이동을 하고 싶을 때가 있습니다.
특히나 긴글일경우 스크롤을 하기가 부담스럽죠.
또 글이 길거나 차례같은것이 있어서 클릭하면 원하는 위치로 이동을 하고 싶을때가 있습니다.
기존의 스크롤을 해주는 플러그인들은 복잡한 설정법이라든가 스타일이 많이 들어가 있다든가 하는것이 대부분인데요. 오늘 소개하는것은 아주 간단합니다.
저만 잘 따라오시면 html, css, javascript 를 몰라도 누구나 따라할 수 있습니다.
초보자들도 따라할 수 있도록 쉽게 설명해드리겠습니다.
먼저 홈페이지를 소개합니다.
Smooth Scroll -> https://github.com/cferdinandi/smooth-scroll
데모페이지 ->http://cferdinandi.github.io/smooth-scroll/
데모페이지에 갈 필요도 없습니다. 눌러보세요
현재 제 블로그에 적용이 되어있을겁니다. 만약 시간이 지나서 없을때는 데모페이지를 참고하세요.
순서는 이렇습니다.
자 가볼까요...
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>
어때요 간단하죠!!
만약 다른 스크립트가 있다면 그곳에 삽입해도 됩니다.
이런식으로 삽입하면 되구요. 다른 형식으로도 움직이게끔 설정할 수도 있습니다.
그것은 홈페이지를 참고하세요.