<script src='http://webo4ka.ru/Ucoz3/prokrutka_ccilok_v_bloke_jquery.min.js'></script>

<style>  
#list {  
  text-align: center;  
  border: 1px solid #ccc;  
  width: 200px;  
  overflow: auto;  
  height: 100px;  
  position: relative;  
  font-size: 14px;  
  line-height: 1.4;  
  font-family: Georgia, Helvetica, Arial, Sans-Serif;  
  margin: 0 auto;  
  border-radius: 5px;  
  box-shadow: 0px 0px 15px #ccc;  
  }  
#list ul {  
  list-style-type: none;  
  }  
#list li {  
  margin-left: -40px;  
  }  
#list a {  
  text-decoration: none;  
  display: block;  
  color: #000;  
  }  
#mover {  
  position: absolute;  
  width: 100%;  
  padding-top: 0px;  
  height: 200px;  
  }  
#list .hover {  
  font-weight: bold;  
  font-size: 18px;  
  color: red;  
  }  
</style>

<script>  
$(function() {  
  $("#list").css("overflow", "hidden").wrapInner("<div id='mover' />");  
  var $el,  
  speed = 9.2,  
  cur = -1,  
  items = $("#list a"),  
  max = items.length - 10;  
  items  
  .each(function(i) {  
  $(this).attr("data-pos", i);  
  })  
  .hover(function() {  
  $el = $(this);  
  $el.addClass("hover");  
  $("#mover").css("top", -($el.data("pos") * speed - 0));  
  cur = $el.data("pos");  
  }, function() {  
  $(this).removeClass("hover");  
  });  
});  
</script>

<div id="list">  
  <ul>  
  <li><a href="#">Шаблоны</a></li>  
  <li><a href="#">Скрипты</a></li>  
  <li><a href="#">Навигация</a></li>  
  <li><a href="#">Иконки</a></li>  
  <li><a href="#">Разное</a></li>  
  <li><a href="#">Закладки</a></li>  
  <li><a href="#">Склад</a></li>  
  <li><a href="#">Помощь</a></li>  
  <li><a href="#">Обратная связь</a></li>  
  <li><a href="#">webo4ka</a></li>  
  </ul>  
</div>