jdelight/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.window {
  height: 105px;
  overflow-y: scroll;
  background: pink;
  list-style-type: none;
  padding: 0;
  position: relative;
}

.window li {
  /* margin: 0; */
  /* padding: 0; */
}

.selected {
  background: red;
}
</style>
</head>
<body>
<ul class="window">
    <li data-item="1">item 1</li>
    <li data-item="2">item 2</li>
    <li data-item="3">item 3</li>
    <li data-item="4">item 4</li>
    <li data-item="5">item 5</li>
    <li data-item="6">item 6</li>
    <li data-item="7">item 7</li>
    <li data-item="8">item 8</li>
    <li data-item="9">item 9</li>
    <li data-item="10">item 10</li>
    <li data-item="11">item 11</li>
    <li data-item="12">item 12</li>
    <li data-item="13">item 13</li>
    <li data-item="14">item 14</li>
    <li data-item="15">item 15</li>
    <li data-item="16">item 16</li>
    <li data-item="17">item 17</li>
    <li data-item="18">item 18</li>
    <li data-item="19">item 19</li>
    <li data-item="20">item 20</li>
    <li data-item="21">item 21</li>
    <li data-item="22">item 22</li>
    <li data-item="23">item 23</li>
    <li data-item="24">item 24</li>
</ul>
<script id="jsbin-javascript">
var scrollAdjustment;

var selectedIndex = 6;

$('li[data-item="'+ selectedIndex +'"]').addClass('selected');

var list = $('.window');
var selectedItem = list.find('.selected');
var listHeight = list.height();
var selectedItemHeight = selectedItem.height();


// ideally should be in the middle of the window
var idealPosition = listHeight/2 - selectedItemHeight/2;

var selectedItemPos = selectedItem.position().top;

// only adjust if the selected item is outside the idea position
var needsAdjustment = selectedItemPos > idealPosition;

if (needsAdjustment){
  scrollAdjustment = Math.abs(selectedItemPos - idealPosition);
  list.scrollTop(scrollAdjustment);
}
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul class="window">
    <li data-item="1">item 1</li>
    <li data-item="2">item 2</li>
    <li data-item="3">item 3</li>
    <li data-item="4">item 4</li>
    <li data-item="5">item 5</li>
    <li data-item="6">item 6</li>
    <li data-item="7">item 7</li>
    <li data-item="8">item 8</li>
    <li data-item="9">item 9</li>
    <li data-item="10">item 10</li>
    <li data-item="11">item 11</li>
    <li data-item="12">item 12</li>
    <li data-item="13">item 13</li>
    <li data-item="14">item 14</li>
    <li data-item="15">item 15</li>
    <li data-item="16">item 16</li>
    <li data-item="17">item 17</li>
    <li data-item="18">item 18</li>
    <li data-item="19">item 19</li>
    <li data-item="20">item 20</li>
    <li data-item="21">item 21</li>
    <li data-item="22">item 22</li>
    <li data-item="23">item 23</li>
    <li data-item="24">item 24</li>
</ul>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.window {
  height: 105px;
  overflow-y: scroll;
  background: pink;
  list-style-type: none;
  padding: 0;
  position: relative;
}

.window li {
  /* margin: 0; */
  /* padding: 0; */
}

.selected {
  background: red;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var scrollAdjustment;

var selectedIndex = 6;

$('li[data-item="'+ selectedIndex +'"]').addClass('selected');

var list = $('.window');
var selectedItem = list.find('.selected');
var listHeight = list.height();
var selectedItemHeight = selectedItem.height();


// ideally should be in the middle of the window
var idealPosition = listHeight/2 - selectedItemHeight/2;

var selectedItemPos = selectedItem.position().top;

// only adjust if the selected item is outside the idea position
var needsAdjustment = selectedItemPos > idealPosition;

if (needsAdjustment){
  scrollAdjustment = Math.abs(selectedItemPos - idealPosition);
  list.scrollTop(scrollAdjustment);
}


    </script></body>
</html>

## jsbin.negoyo.css
.window {
  height: 105px;
  overflow-y: scroll;
  background: pink;
  list-style-type: none;
  padding: 0;
  position: relative;
}

.window li {
  /* margin: 0; */
  /* padding: 0; */
}

.selected {
  background: red;
}

## jsbin.negoyo.js
var scrollAdjustment;

var selectedIndex = 6;

$('li[data-item="'+ selectedIndex +'"]').addClass('selected');

var list = $('.window');
var selectedItem = list.find('.selected');
var listHeight = list.height();
var selectedItemHeight = selectedItem.height();


// ideally should be in the middle of the window
var idealPosition = listHeight/2 - selectedItemHeight/2;

var selectedItemPos = selectedItem.position().top;

// only adjust if the selected item is outside the idea position
var needsAdjustment = selectedItemPos > idealPosition;

if (needsAdjustment){
  scrollAdjustment = Math.abs(selectedItemPos - idealPosition);
  list.scrollTop(scrollAdjustment);
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.window {
	height: 105px;
	overflow-y: scroll;
	background: pink;
	list-style-type: none;
	padding: 0;
	position: relative;
	}

	.window li {
	/* margin: 0; */
	/* padding: 0; */
	}

	.selected {
	background: red;
	}
	</style>
	</head>
	<body>
	<ul class="window">
	<li data-item="1">item 1</li>
	<li data-item="2">item 2</li>
	<li data-item="3">item 3</li>
	<li data-item="4">item 4</li>
	<li data-item="5">item 5</li>
	<li data-item="6">item 6</li>
	<li data-item="7">item 7</li>
	<li data-item="8">item 8</li>
	<li data-item="9">item 9</li>
	<li data-item="10">item 10</li>
	<li data-item="11">item 11</li>
	<li data-item="12">item 12</li>
	<li data-item="13">item 13</li>
	<li data-item="14">item 14</li>
	<li data-item="15">item 15</li>
	<li data-item="16">item 16</li>
	<li data-item="17">item 17</li>
	<li data-item="18">item 18</li>
	<li data-item="19">item 19</li>
	<li data-item="20">item 20</li>
	<li data-item="21">item 21</li>
	<li data-item="22">item 22</li>
	<li data-item="23">item 23</li>
	<li data-item="24">item 24</li>
	</ul>
	<script id="jsbin-javascript">
	var scrollAdjustment;

	var selectedIndex = 6;

	$('li[data-item="'+ selectedIndex +'"]').addClass('selected');

	var list = $('.window');
	var selectedItem = list.find('.selected');
	var listHeight = list.height();
	var selectedItemHeight = selectedItem.height();


	// ideally should be in the middle of the window
	var idealPosition = listHeight/2 - selectedItemHeight/2;

	var selectedItemPos = selectedItem.position().top;

	// only adjust if the selected item is outside the idea position
	var needsAdjustment = selectedItemPos > idealPosition;

	if (needsAdjustment){
	scrollAdjustment = Math.abs(selectedItemPos - idealPosition);
	list.scrollTop(scrollAdjustment);
	}
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<ul class="window">
	<li data-item="1">item 1</li>
	<li data-item="2">item 2</li>
	<li data-item="3">item 3</li>
	<li data-item="4">item 4</li>
	<li data-item="5">item 5</li>
	<li data-item="6">item 6</li>
	<li data-item="7">item 7</li>
	<li data-item="8">item 8</li>
	<li data-item="9">item 9</li>
	<li data-item="10">item 10</li>
	<li data-item="11">item 11</li>
	<li data-item="12">item 12</li>
	<li data-item="13">item 13</li>
	<li data-item="14">item 14</li>
	<li data-item="15">item 15</li>
	<li data-item="16">item 16</li>
	<li data-item="17">item 17</li>
	<li data-item="18">item 18</li>
	<li data-item="19">item 19</li>
	<li data-item="20">item 20</li>
	<li data-item="21">item 21</li>
	<li data-item="22">item 22</li>
	<li data-item="23">item 23</li>
	<li data-item="24">item 24</li>
	</ul>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">.window {
	height: 105px;
	overflow-y: scroll;
	background: pink;
	list-style-type: none;
	padding: 0;
	position: relative;
	}

	.window li {
	/* margin: 0; */
	/* padding: 0; */
	}

	.selected {
	background: red;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var scrollAdjustment;

	var selectedIndex = 6;

	$('li[data-item="'+ selectedIndex +'"]').addClass('selected');

	var list = $('.window');
	var selectedItem = list.find('.selected');
	var listHeight = list.height();
	var selectedItemHeight = selectedItem.height();


	// ideally should be in the middle of the window
	var idealPosition = listHeight/2 - selectedItemHeight/2;

	var selectedItemPos = selectedItem.position().top;

	// only adjust if the selected item is outside the idea position
	var needsAdjustment = selectedItemPos > idealPosition;

	if (needsAdjustment){
	scrollAdjustment = Math.abs(selectedItemPos - idealPosition);
	list.scrollTop(scrollAdjustment);
	}


	</script></body>
	</html>