Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  
​
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body style="width:3000px">
  
  
​
<div style="position:fixed;"><p id="left"><a href="#">&lt;&lt; Scroll left</a></p>
<p id="right"><a href="#">Scroll right &gt;&gt;</a></p></div>
​
​
<div style="position:relative; top:150px">
<div class="box" id="01" style="width:200px; height:100px; border:solid 1px; float:left">div01</div>
<div class="box" id="02" style="width:150px; height:100px; border:solid 1px; float:left">div02</div>
<div class="box" id="03" style="width:250px; height:100px; border:solid 1px; float:left">div03</div>
<div class="box" id="04" style="width:300px; height:100px; border:solid 1px; float:left">div04</div>
<div class="box" id="05" style="width:210px; height:100px; border:solid 1px; float:left">div05</div>
<div class="box" id="06" style="width:140px; height:100px; border:solid 1px; float:left">div06</div>
</div>
​
​
​
​
​
​
​
</body>
</html>
​
 
*{margin:0;padding:0;}
body{
  overflow-x:hidden;
}
 
$(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});
    
    
  });
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers