Edit in JSFiddle

var director_pos = [];

function percent_top (tam){
return (tam*100)/$(window).height();
}




$(document).ready(function(){
	var winHeight = $(window).height();
	var halfPage= Math.round((winHeight/2),0);



	$("#home-nav li").each(function(){
		director_pos.push (Math.round($(this).position().top,0));	
	});


	$("#home-nav li").click(function(e){
		e.preventDefault();
		$("#home-nav li").removeClass("color");
		$(this).addClass("color");
		var hn= $("#home-nav").innerHeight() /2;
		var offset = director_pos [$(this).index()] +20;
		$("#home-nav").css("top", percent_top(halfPage+hn-offset) + "%");
	});

}); 

<ul id="home-nav" class="slide-control__list">

     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>item 5</li>
     <li>item 6</li>
     <li>item 7</li>
     <li>item 8</li>

</ul>   


  <hr class="regla" />   

#home-nav {
  transition: 0.5s ease-out;
}



h3, .hidden-xs {
	display: none;
}

ul {
	list-style: none
}


a {
	color: black;
}

.color {
	color: red;
}


.slide-control__list {
    list-style: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0;
    width: 100%;
}


.slide-control__list li {
font-size: 26px;
font-weight: bold;
}




.regla {
border-top: 1px dashed #8c8b8b;
position: absolute;
width: 100%;
top: 50%;
z-index: -1;
}