scroll to element in horizontal div

Question

I have a horizontal div:

i need to scroll to the specific element in this div via JavaScript button (after the click div must be scrolled to that element). How can I do this?

<div class="group" id="frames"> <div class="item frames-item"> <img src="1.jpg"> </div> <div class="item frames-item">     <img src="2.jpg"> </div> .... .... </div> 

Answer 1

Or you could use the following snippet:

$('.scrollable').animate({scrollLeft: $('#dstElement').position().left}, 500); 

Where position() returns the #dstElement's relative position to `.scrollable' if scrollable is positioned.

Code & Demo

    var $scroller = $('.scroller');      // assign click handler      $('button').on('click', function () {                 // get the partial id of the div to scroll to          var divIdx = $('input').val();                              // retrieve the jquery ref to the div          var scrollTo = $('#d'+divIdx)                         // change its bg              .css('background', '#9f3')                        // retrieve its position relative to its parent              .position().left;                             console.log(scrollTo);          // simply update the scroll of the scroller          // $('.scroller').scrollLeft(scrollTo);           // use an animation to scroll to the destination          $scroller            .animate({'scrollLeft': scrollTo}, 500);          });

    .scroller {          width: 300px;          height: 100px;          overflow-x: auto;          overflow-y: hidden;      }      .container {          position: relative; /*important for the .position() method */          height: 100px;          width: 770px;      }      .container div {          height: 90px;          width: 60px;          float: left;          margin: 5px;          background: #39f;      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="scroller">          <div class="container">              <div id="d1"></div>              <div id="d2"></div>              <div id="d3"></div>              <div id="d4"></div>              <div id="d5"></div>              <div id="d6"></div>              <div id="d7"></div>             <!-- ... -->                     </div>      </div>      <button>Scroll to: </button> <input type="text" value="4"/>