아는 것이 좋은 것이다.

[jQuery] 스크롤 페이징(바로 테스트 가능) 본문

jQuery

[jQuery] 스크롤 페이징(바로 테스트 가능)

start0 2014. 5. 9. 16:28 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>


    <script type="text/javascript">
function lastPostFunc()  
{  
    $("div#lastPostsLoader").html("로딩중...");  
    $.get("/data.html?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),     
   
    function(data){  
        if (data != "") {  
        $(".wrdLatest:last").after(data);             
        }  
        $("div#lastPostsLoader").empty();  
    });  
};  

$(window).scroll(function(){  
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){  
           lastPostFunc();  
        }  
});  
    </script>
</head>
<body>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
    <div class="wrdLatest">content</div>    
	<div class="wrdLatest" id=9>content</div>  
	<div class="wrdLatest" id=8>content</div>
    <div id="lastPostsLoader"></div>
</body>
</html>
Data.html 
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
<div>Data5</div>
<div>Data6</div>
<div>Data7</div>
<div>Data8</div>
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
<div>Data5</div>
<div>Data6</div>
<div>Data7</div>
<div>Data8</div>
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
<div>Data5</div>
<div>Data6</div>
<div>Data7</div>
<div>Data8</div>
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
<div>Data5</div>
<div>Data6</div>
<div>Data7</div>
<div>Data8</div>
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
<div>Data5</div>
<div>Data6</div>
<div>Data7</div>
<div>Data8</div>
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
<div>Data5</div>
<div>Data6</div>
<div>Data7</div>
<div>Data8</div>
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

[jQuery] 제이쿼리 최신버전 인클루드  (0) 2014.05.12
[jQuery] tr 숨김처리 display:none  (2) 2014.05.10
[jQuery] 이미지 슬라이드, 페이드 전환 샘플  (0) 2014.05.09
[jQuery] 달력 스크립트  (0) 2014.05.07
[jQuery] 파일첨부 버튼 이미지로 변경  (0) 2014.05.07
공유하기 링크
'jQuery' Related Articles more
Comments