单击另一个div时自动滚动到div

Question

当我点击左侧较小的div之一（div内部的"smallitems"课时，我想要右边的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 class="col">5</div>中的数字5（div）。正如您所见，右侧div已滚动到第5个div（<div class="item">5</div>）。

与上述类似，我点击了数字4，然后选择了div自动滚动到第4个div。

请参阅jfiddle http://jsfiddle.net/h7bLK/

Answer 1

这可以通过锚来完成。如果您将div.col替换为锚标记并为div.item添加ID，请执行以下操作：

<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>

Fiddle link

BONUS ：您可以将外部链接到正确的项目。

缺点：如果内容小于渲染帧，则整个帧都会滚动。

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。