單擊另一個div時自動滾動到div

Question

當我單擊左側較小的div之一（在類為"smallitems"的div內部）時，我想要右側的div （具有類"items" ）自動滾動到適當的較大div 。

HTML：

 <div class="smallitems">
    <div class="col">1</div>
     <div class="col"> 2 </div>
     <div class="col"> 3</div>
     <div class="col">4</div>
     <div class="col"> 5 </div>
     <div class="col">6 </div>
     <div class="col"> 7</div>
    <div class="col">8</div>
 </div>    

 <div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">5</div>
</div>

JavaScript（使用JQuery）：

$('.smallitems .col').on("click", function(){

  //how use scroll items show

});

例：

這是我之前點擊一個div左div （ "smallitems" ）。

現在，我點擊了左側div的數字5（ <div class="col">5</div> ）。 如您所見，右div已滾動到第五個div（ <div class="item">5</div> ）。

與上面類似，我單擊了數字4，隨后將正確的div自動滾動到第4個div 。

參見jfiddle http://jsfiddle.net/h7bLK/

Answer 1

這可以通過錨來完成。 如果更換div.col錨標記S和添加ID到您的div.item就像這樣：

<div class="smallitems">
    <a class="col" href="#item1">1</a>
    <a class="col" href="#item2">2</a>
    . . . 
</div>
<div class="items">
    <div class="item" id="item1">1</div>
    <div class="item" id="item2">2</div>
    . . . 
</div>

小提琴鏈接

獎勵 ：您將可以從外部鏈接到正確的項目。

缺點 ：如果內容小於渲染的框架，則整個框架將滾動。

Answer 2

According to requirement, no-need to use javascript or jquery. Its done only using css. 


    <div class="main-container">
            <div class="smallitems">
             <div class="col"><a href="#one">1</a></div>
              <div class="col"> <a href="#two">2</a> </div>
              <div class="col last-child"><a href="#three">3</a></div>
              <div class="col"><a href="#four">4</a></div>
              <div class="col"><a href="#five">5</a> </div>
              <div class="col last-child"><a href="#six">6</a> </div>
              <div class="col"> <a href="#seven">7</a></div>
             <div class="col"><a href="#eight">8</a></div>
          </div>    

        <div class="items">
            <div class="scroll">
                <div class="item" id="one">1</div>
                <div class="item" id="two">2</div>
                <div class="item" id="three">3</div>
                <div class="item" id="four">4</div>
                <div class="item" id="five">5</div>
                <div class="item" id="six">6</div>
                <div class="item" id="seven">7</div>
                <div class="item" id="eight">8</div>
            </div>

       </div>
    </div>

**Css** :

.main-container{
margin: 20px auto; 
width:960px; 
overflow: hidden; 
border: 1px solid #bababa;
padding: 5px;
}

.smallitems{ 
overflow: hidden; 
float: left; 
width:330px; 
border: 1px solid #bababa;
 display: table; 
padding: 10px;
}

.col a{ 
display: block;
 padding: 41px 0; 
text-decoration: none;
}


.col{ 
float:left;
display: table-cell;
 vertical-align: middle;
 text-align: center; 
font-size: 14px; 
font-weight: 700; 
cursor: pointer; 
border: 1px solid #bababa;
 height: 100px; 
width: 100px; 
margin: 0 10px 10px 0;
}

.items{
float: right;
 width:580px; 
border: 1px solid #bababa; 
overflow-y: hidden;
 white-space: nowrap;
 padding: 10px;
}

.col:nth-child(3),.last-child{
margin-right: 0;
}

.item{
display: inline-block;
text-align: center; 
position:relative;
font-size: 14px; 
font-weight: 700; 
border: 1px solid #bababa; 
height: 440px; 
width: 180px; 
margin: 0 10px 10px 0;
}

Answer 3

<div class="container">
    <div class="smallitems">
        <div class="col">1</div>
         <div class="col"> 2 </div>
         <div class="col"> 3</div>
         <div class="col">4</div>
         <div class="col"> 5 </div>
         <div class="col">6 </div>
         <div class="col"> 7</div>
        <div class="col">8</div>
    </div>    
    <div class="items" id="maindiv"> // set id 
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">5</div>
    </div>
</div>   

$('.smallitems').on("click", function(e){ 
     // get click element text and calculate scrollLeft
     var scrollLeft = (parseInt($(e.target).text())-1) * 200;
     // use jquery animation function
     $('#maindiv').animate({scrollLeft :scrollLeft},1100)
});

Answer 4

$('.smallitems .col').on("click", function(){
    var index =  $(this).index();
    var items = $('.items');
    var item =  items.children().eq(index);
    items.scrollLeft((item.width() - 50)  * index);
});

當您向項目添加新的div時，其值為50。