Good day! There was such a task, which even I have no idea how to solve. The .blk is this: when you click on the red block, the .blk block should scroll left to the left edge of the screen. I apologize for the tautology. And thank you for your help!

 .wrp { display: block; position: relative; overflow: hidden; visibility: visible; overflow-x: scroll; width: 100%; height: 200px; background: #cccccc; } .blk { display: block; position: relative; width: 1000px; height: 500px; z-index: 2; margin-left: 100%; background: #aabbcc; } .knop { display: block; position: absolute; width: 20px; height: 20px; right: 10px; top: 50%; background: red; cursor: pointer; } 
 <div class="wrp"> <div class="knop"></div> <div class="blk"></div> </div>

    2 answers 2

     $(".knop").click(function() { $(".wrp").animate({ scrollLeft:$(".knop").offset().left+20 }, 1000) }) 
     .wrp { display: block; position: relative; overflow: hidden; visibility: visible; overflow-x: scroll; width: 100%; height: 200px; background: #cccccc; } .blk { display: block; position: relative; width: 1000px; height: 500px; z-index: 2; margin-left: 100%; background: #aabbcc; } .knop { display: block; position: absolute; width: 20px; height: 20px; right: 10px; top: 50%; background: red; cursor: pointer; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrp"> <div class="knop"></div> <div class="blk"></div> </div> 

       $(".knop").click(function(){ $(".blk").animate({ 'margin-left': "10%" },1000) $(".knop").animate({ 'left': "6%" },1000) }) 
       .wrp { display: block; position: relative; overflow: hidden; visibility: visible; overflow-x: scroll; width: 100%; height: 200px; background: #cccccc; } .blk { display: block; position: relative; width: 1000px; height: 500px; z-index: 2; margin-left: 100%; background: #aabbcc; } .knop { display: block; position: absolute; width: 20px; height: 20px; right: 10px; top: 50%; background: red; cursor: pointer; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrp"> <div class="knop"></div> <div class="blk"></div> </div>

      • Greetings! By this we simply reduce the margin. And I need to change the margin. This is the whole task. - LADYX