document.getElementById('item').addEventListener('change', function(event) {
var value = this.value;
if (!(/^[\d]+$/.test(value))) {
return;
}
var index = parseInt(value) - 1;
var $container = document.querySelector('ul.list-group');
var $item = document.querySelectorAll('ul.list-group li').item(index);
$container.scrollTop = $item.offsetTop - $container.offsetTop;
});
<form class="form">
<div class="form-group">
<input type="number" id="item" min="1" class="form-control" value="1">
</div>
</form>
<ul class="list-group">
<li class="list-group-item list-group-item-success">1</li>
<li class="list-group-item list-group-item-info">2</li>
<li class="list-group-item list-group-item-warning">3</li>
<li class="list-group-item list-group-item-danger">4</li>
<li class="list-group-item list-group-item-success">5</li>
<li class="list-group-item list-group-item-info">6</li>
<li class="list-group-item list-group-item-warning">7</li>
<li class="list-group-item list-group-item-danger">8</li>
<li class="list-group-item list-group-item-success">9</li>
<li class="list-group-item list-group-item-info">10</li>
<li class="list-group-item list-group-item-warning">11</li>
<li class="list-group-item list-group-item-danger">12</li>
<li class="list-group-item list-group-item-success">13</li>
<li class="list-group-item list-group-item-info">14</li>
<li class="list-group-item list-group-item-warning">15</li>
<li class="list-group-item list-group-item-danger">16</li>
<li class="list-group-item list-group-item-success">17</li>
<li class="list-group-item list-group-item-info">18</li>
<li class="list-group-item list-group-item-warning">19</li>
<li class="list-group-item list-group-item-danger">20</li>
<li class="list-group-item list-group-item-success">21</li>
<li class="list-group-item list-group-item-info">22</li>
<li class="list-group-item list-group-item-warning">23</li>
<li class="list-group-item list-group-item-danger">24</li>
<li class="list-group-item list-group-item-success">25</li>
<li class="list-group-item list-group-item-info">26</li>
<li class="list-group-item list-group-item-warning">27</li>
<li class="list-group-item list-group-item-danger">28</li>
<li class="list-group-item list-group-item-success">29</li>
<li class="list-group-item list-group-item-info">30</li>
<li class="list-group-item list-group-item-warning">31</li>
<li class="list-group-item list-group-item-danger">32</li>
</ul>
ul.list-group {
height: 300px;
overflow-y: scroll;
}