jQuery를 ScrollTo의 mutliple 내가 클릭시 다음과 이전 버튼은 상자를 스크롤하려면 이전/다음 버튼을

Question

HTML 구조

<div class="main"> 
    <div class="boxes">Content here</div> 
    <div class="boxes">Content here</div> 
    <div class="boxes">Content here</div> 
    <div class="boxes">Content here</div> 
    <div class="boxes">Content here</div> 
    <div class="nav"> 
     <a href="#" class="next"></a> 
     <a href="#" class="prev"></a> 
    </div> 
</div> 

를 사용하여 div에.

는 바이올린에 발견 -> http://jsfiddle.net/FWXc5/

하지만 각 상자의 향후 & 이전 버튼 만 대신 해당 항목/버튼이 필요합니다.

어떤 도움도 대단히 감사하겠습니다,

건배

Answer 1

당신은로 nextSibling 및 previousSibling은 속성을 사용할 수 있습니다.

Answer 2

jQuery next() 및 prev() 메서드를 사용하면이 작업을 수행 할 수 있습니다. 아래의 코드

HTML

<div id="home-block"> 
    <div class="current">Content Goes here</div> 
    <div>A box of content</div> 
    <div>Content</div> 
    <div>More content...</div> 
</div> 

<div id="nav-right"> 
    <input type="button" value="Prev" id="prev" /> 
    <input type="button" value="Next" id="Next" /> 
</div> 

CSS

#home-block div{ 
width: 300px; 
height: 400px; 
border: 1px solid #000; 
box-shadow: 1px 1px 3px #888; 
margin: 10px 10px 10px 15px; 
} 

.post-contain{ 
position: relative; 
margin: 0 auto; 
width: 450px; 
border: 1px solid #000; 
} 

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

.current { 
    color: red; 
} 

jQuery를 코드

,536,913,632와

시도 10

$('#nav-right input[type=button]').click(function(e) { 
     if($(this).attr('id') == 'prev') { 
      $(".current").prev().addClass("current"); 
      $(".current").eq(1).removeClass("current"); 
      $('html, body').animate({ 
       scrollTop: $(".current").offset().top 
      }, 250); 
     }else if($(this).attr('id') == 'Next') { 
      $(".current").next().addClass("current"); 
      $(".current").eq(0).removeClass("current"); 
      $('html, body').animate({ 
       scrollTop: $(".current").offset().top 
      }, 250); 
     } 
    }); 

데모 : http://jsfiddle.net/31bb118w/