Question

I have page with two buttons (scroll left and scroll right), and on click, page have to go left and right by div width (every div have different width). Could this be done with jQuery? I don’t know how to read current div id (one close to left side of border), and how to define scroll (left or right) by width of previous/next div?

Answer 1

On click just increase, decrease a Counter var c.
This will help us to target the desired DIV by .eq( c )
Than all we need is to get the desired DIV .offset().left and move the page to that position:

jsBin demo

HTML (add a .box to your DIVs):

<div class="box" id="01" style="width:200px; height:100px; border:solid 1px; float:left">div01</div>

jQuery:

$(function(){

  var c = 0;
  var boxN = $('.box').length;
  
  $('#left, #right').on('click', function( e ){
    
    e.preventDefault();
   
    c = this.id=='right' ? ++c%boxN : --c ;
    if(c<0){ c=boxN-1; }
    var boxL = $('.box').eq( c ).offset().left;
    
    $('html, body').stop().animate({scrollLeft: boxL});
    
    
  });
  
});