jQuery 페이지 스크롤링(scrolling) 플러그인

jQuery 페이지 스크롤링(scrolling) 플러그인

클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다.

미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html

HTML 코드

네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자

<div id="nav-dock"> 
 <ul>
	<li><a href="#" id="prev">↑ Prev</a></li>
	<li><a href="#" id="next">↓ Next</a></li>
	<li><a class="scrolltoanchor" href="#comments">Comments</a></li>
	<li><a class="scrolltoanchor" href="#reply">Reply</a></li>
    <li><a href="#top" class="scrolltoanchor">맨위로</a></li>
    </ul>

</div>

콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다.

<div class="post"><h2>포스팅 1</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 2</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 3</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 4</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 5</h2><p>내용물,그림등</p></div>

네비게이션

네비게이션은 페이지이동해도 유지하도록 고정으로 해준다.

#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}

Javascript

jquery와 사용된스크립트

이 플러그인은 http://sianasiatiger.cafe24.com/js/jquery.scrollTo-min.js

삽입된 스크립트를 보자

$(function() {
    function scroll(direction) {
        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.post');
            collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
       });
       for(i = 0; i < positions.length; i++) {
         if (direction == 'next' && positions[i] > here) 
		     { scroll = collection.get(i); break; }
         if (direction == 'prev' && i > 0 && positions[i] >= here) 
		     { scroll = collection.get(i-1); break; }
        }
        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }
        return false;
    }
    $("#next,#prev").click(function() {
        return scroll($(this).attr('id'));
    });
    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });
});

post는 콘텐츠내용의 클래스이다

#next,#prev는 아이디로, scrolltoanchor는 클릭시 href에서 지정해준주소로 가게 지정한것을 보여준다.

마지막으로 꾸미기. CSS는 알아서 꾸미자 예제는 CSS3를 사용해서 둥근모서리를 보여준다.

body {
	background: #ededed;
	width: 800px;
	margin: 40px auto 100px;
}
ul,li{list-style : none; }
a {
	color: #66F;
	text-decoration: none;
	outline: none;
}
.post {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#comments {
	height: 1000px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#reply {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}
#nav-dock a {
	display: block;
	padding: 3px 10px;
	margin: 3px 0;
	background: #666;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock a:hover {
	background: #000;
}
#nav-dock #next {
	margin-bottom: 10px;
}